javascript - angular directive scope not binding data -
i have question, code 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 undefined, , template no value, when declare $scope.target within controller, code works, why?
this should pattern:
.controller('mycontroller', function($scope){ $scope.target = {'aaa': 'aaa'}; //in reality, you'd load via other method, $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, directive responsible going , fetching data, , not pass in it. you'd want consider if don't need data in multiple places.
Comments
Post a Comment