AngularJS - 范围值在指令范围无法访问 [英] AngularJS - Scope value not accessible in the directive Scope

问题描述

FIDDLE

我创建了一个指令： -

I have created a directive :-

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

我的HTML： -

My Html :-

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

控制器： -

Controller :-

$scope.statesList = function () {
        var query = {
            status: 'active'
        }

        StatesList.query(query).$promise.then(function (states) {
            $scope.states = states;
        });
    };

我得到这样的状态数据： -

I get data in states like this :-

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

如何获得在控制器的范围值指令？

----- -----添加

-----Added-----

这是我看到的的console.log（范围）在我的指令： -

This is what i see in console.log(scope) in my directive :-

推荐答案

您在 $ scope.states 的错误。它必须是一个对象，而不是字符串。

You have mistakes in $scope.states. It must be an object, not a string.

继code ++工程

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>

看看这个 http://jsfiddle.net/fizerkhan/69Pq9/1/

这篇关于AngularJS - 范围值在指令范围无法访问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！