Javascript AngularJS-无法在指令范围中访问范围值

我创建了一个指令：-

return {
        restrict: 'EAC',
        scope: {
            statesActive: '='
        },            
        link: function (scope, element, attrs) {
        var stateData = scope.statesActive.states; // Don't get data here
        ....
}

我的Html：-

<gt-map states-active="states"></gt-map>

<gt-map states-active="states"></gt-map>

我在各州获得的数据如下：-

$scope.states = "{states:[{ 'state' : 'CA', 'color' : '#61c419']}";

如何获取指令中的

控制器

范围值

-----增加-----

这是我在指令的

console.log（scope）

中看到的：-

return {
        restrict: 'EAC',
        scope: {
            statesActive: '='
        },            
        link: function (scope, element, attrs) {
        var stateData = scope.statesActive.states; // Don't get data here
        ....
}

---

在指令中插入$parse。。。。 试试这个

 angular.module('myApp').directive('gtMap', ['$parse',
    function($parse) {
      return {
          restrict: 'EAC',

          link: function (scope, element, attrs) {
              var fieldGetter = $parse(attrs.statesActive);
              console.log(fieldGetter)
                var field = fieldGetter(scope);
              //var stateData = scope.statesActive.states;
              // Don't get data here
              console.log(field)
          }
       }
    }
  ]);

---

在指令中插入$parse。。。。 试试这个

 angular.module('myApp').directive('gtMap', ['$parse',
    function($parse) {
      return {
          restrict: 'EAC',

          link: function (scope, element, attrs) {
              var fieldGetter = $parse(attrs.statesActive);
              console.log(fieldGetter)
                var field = fieldGetter(scope);
              //var stateData = scope.statesActive.states;
              // Don't get data here
              console.log(field)
          }
       }
    }
  ]);

---

在指令中插入$parse。。。。 试试这个

 angular.module('myApp').directive('gtMap', ['$parse',
    function($parse) {
      return {
          restrict: 'EAC',

          link: function (scope, element, attrs) {
              var fieldGetter = $parse(attrs.statesActive);
              console.log(fieldGetter)
                var field = fieldGetter(scope);
              //var stateData = scope.statesActive.states;
              // Don't get data here
              console.log(field)
          }
       }
    }
  ]);

---

在指令中插入$parse。。。。 试试这个

 angular.module('myApp').directive('gtMap', ['$parse',
    function($parse) {
      return {
          restrict: 'EAC',

          link: function (scope, element, attrs) {
              var fieldGetter = $parse(attrs.statesActive);
              console.log(fieldGetter)
                var field = fieldGetter(scope);
              //var stateData = scope.statesActive.states;
              // Don't get data here
              console.log(field)
          }
       }
    }
  ]);

---

尝试使用此访问您的范围

return {
    ...
    link: function (scope, element, attrs) {
        ....
        scope.$parent.$parent.YourVariable;
    }
};

我认为您需要将HTML更改为：

---

尝试使用此选项访问您的范围

return {
    ...
    link: function (scope, element, attrs) {
        ....
        scope.$parent.$parent.YourVariable;
    }
};

我认为您需要将HTML更改为：

---

尝试使用此选项访问您的范围

return {
    ...
    link: function (scope, element, attrs) {
        ....
        scope.$parent.$parent.YourVariable;
    }
};

我认为您需要将HTML更改为：

---

尝试使用此选项访问您的范围

return {
    ...
    link: function (scope, element, attrs) {
        ....
        scope.$parent.$parent.YourVariable;
    }
};

我认为您需要将HTML更改为：

在对另一个答案的注释中引用了对的轻微调整，现在显示了通过其范围检索指令链接功能中的状态：

link: function (scope, element, attrs) {            
    var stateData = $parse(scope.statesActive)();
    console.log(stateData);
}

声明：

scope: { statesActive: '=' }

您正在将指令的作用域绑定到名为

states active

的属性，因此您所要做的就是在指令中引用它

scope.statesActive

这将以字符串的形式获取值，您可以使用$parse服务获取对象的值

在对另一个答案的注释中引用了对的轻微调整，该注释现在显示了通过其范围检索指令链接函数中的状态：

link: function (scope, element, attrs) {            
    var stateData = $parse(scope.statesActive)();
    console.log(stateData);
}

声明：

scope: { statesActive: '=' }

您正在将指令的作用域绑定到名为

states active

的属性，因此您所要做的就是在指令中引用它

scope.statesActive

这将以字符串的形式获取值，您可以使用$parse服务获取对象的值

在对另一个答案的注释中引用了对的轻微调整，该注释现在显示了通过其范围检索指令链接函数中的状态：

link: function (scope, element, attrs) {            
    var stateData = $parse(scope.statesActive)();
    console.log(stateData);
}

声明：

scope: { statesActive: '=' }

您正在将指令的作用域绑定到名为

states active

的属性，因此您所要做的就是在指令中引用它

scope.statesActive

这将以字符串的形式获取值，您可以使用$parse服务获取对象的值

在对另一个答案的注释中引用了对的轻微调整，该注释现在显示了通过其范围检索指令链接函数中的状态：

link: function (scope, element, attrs) {            
    var stateData = $parse(scope.statesActive)();
    console.log(stateData);
}

声明：

scope: { statesActive: '=' }

您正在将指令的作用域绑定到名为

states active

的属性，因此您所要做的就是在指令中引用它

scope.statesActive

---

这将以字符串形式获取值，您可以使用$parse服务获取对象的值

如果您在

$scope.states中有错误

。它必须是对象，而不是字符串

下面的代码有效

JS

angular.module('myApp', []);
angular.module('myApp').directive('gtMap', 
    function() {
      return {
          restrict: 'EAC',
          scope: {
              statesActive: '='
          },            
          link: function (scope, element, attrs) {
              var stateData = scope.statesActive.states;
              // Don't get data here
              console.log(scope.statesActive);
          }
       }
    }
  );

angular.module('myApp').controller('MyCtrl', 
    function($scope) {
        // If states is a string got from database, use angular.fromJson(json) to parse. 
        // $scope.states = angular.fromJson(response); 
        $scope.states = {states:[{ 'state' : 'CA', 'color' : '#61c419'}]};

    });

HTML

<div  ng-app="myApp">
    <div ng-controller="MyCtrl">
            <gt-map states-active="states"></gt-map>
    </div>
</div>

---

查看此JSFIDLE

您在

$scope.states

中有错误。它必须是对象，而不是字符串

下面的代码有效

JS

angular.module('myApp', []);
angular.module('myApp').directive('gtMap', 
    function() {
      return {
          restrict: 'EAC',
          scope: {
              statesActive: '='
          },            
          link: function (scope, element, attrs) {
              var stateData = scope.statesActive.states;
              // Don't get data here
              console.log(scope.statesActive);
          }
       }
    }
  );

angular.module('myApp').controller('MyCtrl', 
    function($scope) {
        // If states is a string got from database, use angular.fromJson(json) to parse. 
        // $scope.states = angular.fromJson(response); 
        $scope.states = {states:[{ 'state' : 'CA', 'color' : '#61c419'}]};

    });

HTML

<div  ng-app="myApp">
    <div ng-controller="MyCtrl">
            <gt-map states-active="states"></gt-map>
    </div>
</div>

---

查看此JSFIDLE

您在

$scope.states

中有错误。它必须是对象，而不是字符串

下面的代码有效

JS

angular.module('myApp', []);
angular.module('myApp').directive('gtMap', 
    function() {
      return {
          restrict: 'EAC',
          scope: {
              statesActive: '='
          },            
          link: function (scope, element, attrs) {
              var stateData = scope.statesActive.states;
              // Don't get data here
              console.log(scope.statesActive);
          }
       }
    }
  );

angular.module('myApp').controller('MyCtrl', 
    function($scope) {
        // If states is a string got from database, use angular.fromJson(json) to parse. 
        // $scope.states = angular.fromJson(response); 
        $scope.states = {states:[{ 'state' : 'CA', 'color' : '#61c419'}]};

    });

HTML

<div  ng-app="myApp">
    <div ng-controller="MyCtrl">
            <gt-map states-active="states"></gt-map>
    </div>
</div>

---

查看此JSFIDLE

您在

$scope.states

中有错误。它必须是对象，而不是字符串

下面的代码有效

JS

angular.module('myApp', []);
angular.module('myApp').directive('gtMap', 
    function() {
      return {
          restrict: 'EAC',
          scope: {
              statesActive: '='
          },            
          link: function (scope, element, attrs) {
              var stateData = scope.statesActive.states;
              // Don't get data here
              console.log(scope.statesActive);
          }
       }
    }
  );

angular.module('myApp').controller('MyCtrl', 
    function($scope) {
        // If states is a string got from database, use angular.fromJson(json) to parse. 
        // $scope.states = angular.fromJson(response); 
        $scope.states = {states:[{ 'state' : 'CA', 'color' : '#61c419'}]};

    });

HTML

<div  ng-app="myApp">
    <div ng-controller="MyCtrl">
            <gt-map states-active="states"></gt-map>
    </div>
</div>

---

查看此JSFIDLE

范围。statesActive

是一个数组，因此需要按如下方式访问它

---

var stateData=scope.statesActive[0]。状态

scope.statesActive

是一个数组，因此您需要按如下方式访问它

---

var stateData=scope.statesActive[0]。状态

scope.statesActive

是一个数组，因此您需要按如下方式访问它

---

var stateData=scope.statesActive[0]。状态

scope.statesActive

是一个数组，因此您需要按如下方式访问它

---

---

var stateData=scope.statesActive[0]。状态

我试过了，但是……运气不好。。！我试过了，但是……运气不好。。！我试过了，但是……运气不好。。！我试过了，但是……运气不好。。！当我控制台日志

attrs.statesActive

时，我会得到

状态

，您有什么问题吗？：）我应该获得

scope.states

值，即

{states:[{'state'：'CA'，'color'：'#61c419'}}}

。。。。但是我只得到字符串

状态

。非常有趣，签出.access“scope.statesActive”。当我控制台日志

attrs.statesActive

时，我得到

状态

，你有什么问题吗？：）我应该获得

scope.states

值，即

{states:[{'state'：'CA'，'color'：'#61c419'}}}

。。。。但是我只得到字符串

状态

。非常有趣，签出.access“scope.statesActive”。当我控制台日志

attrs.statesActive

时，我得到

状态

，你有什么问题吗？：）我应该获得

scope.states

值，即

{states:[{'state'：'CA'，'color'：'#61c419'}}}

。。。。但是我只得到字符串

状态

。非常有趣，签出.access“scope.statesActive”。当我控制台日志

attrs.statesActive

时，我得到

状态

，你有什么问题吗？：）我应该获得

scope.states

值，即

{states:[{'state'：'CA'，'color'：'#61c419'}}}

。。。。但我只得到字符串

states

.Rly有趣，签出.access“scope.statesActive”。尝试

$scope.states=JSON.parse（“{”states:[{”state:“CA”，“color:“#61c419”}]）

$scope.states是控制器中的字符串。将其更改为$scope.states={states:[{'state'：'CA'，'color'：