angular directive scope not binding data

Question

I have a question, code like this:

HTML:

<div class="overflow-hidden ag-center" world-data info="target"></div>

js:

.directive('worldData', ['$interval', function($interval) {
    return {
        scope: {
            chart: '=info'
        },

        template: '<div>{{chart.aaa}}</div>',

        link: function($scope, element, attrs) {

            $scope.target = {'aaa': 'aaa'};

            aaa = $scope.chart;
        }
    }
}])

The chart value is undefined, and template no value, but when I declare $scope.target within controller, the code works, why?

With how your code works, I'd expect there to be a target value on the parent scope of the directive. The link function isn't doing anything that should affect the rendered values, as far as I can see. — Dylan Watt
– Dylan Watt, Commented May 15, 2015 at 2:23
When I use this, link: function($scope, element, attrs) { $scope.target = {'aaa': 'aaa'}; $scope.chart = $scope.target; } DOM render immediately. And the code works perfectly — jackieLin
– jackieLin, Commented May 15, 2015 at 2:28
Well sure, because you're redefining chart inside the directive. chart: '=info' is for passing in data from outside the directive. In this case you're passing target (should be defined outside the directive, presumable in a controller) to the directive via info which maps to the directive's $scope.chart. Are you defining target as the appropriate data outside the directive to be passed in? — Dylan Watt
– Dylan Watt, Commented May 15, 2015 at 3:12
no, $scope.target define outside directive works, and when I define inside link function, it is not work, it confuse me. And the angular document isn't say anything. — jackieLin
– jackieLin, Commented May 15, 2015 at 3:34
See my answer. The isolate scope scope:{chart: '=info'} is specifically only for passing in a value from outside the directive to inside the directive, mapped via an attribute, in this case a value passed into info="" will be mapped to $scope.chart inside your directive. If you want to define the value inside the directive, then do that, either in link or controller, and just have scope:{} in the directive definition. — Dylan Watt
– Dylan Watt, Commented May 15, 2015 at 3:40

Dylan Watt · Accepted Answer · 2015-05-15 03:15:22Z

1

This should be generally the pattern:

.controller('myController', function($scope){
    $scope.target = {'aaa': 'aaa'}; //In reality, you'd normally load this up via some other method, like $http.
})

.directive('worldData', [function() {
    return {
        scope: {
            chart: '=info'
        },

        template: '<div>{{chart.aaa}}</div>'
     }
}])

--

<div ng-controller="myController">
    <div class="overflow-hidden ag-center" world-data info="target"></div>
</div>

Alternatively, the directive could be responsible for going and fetching the data, and not pass in anything to it. You'd only want to consider that if you don't need the data in multiple places.

answered May 15, 2015 at 3:15

Dylan Watt

3,38715 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular directive scope not binding data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related