每 5 秒将异步数据传递给指令

Question

Controller

angular.module('App').controller('reportsController',function($scope,$interval,$http){
$scope.reportsObj = {
retorts:[]
}
$scope.getReports = () => {
$http({
method: 'GET',
url: '/getReports'
}).then(function successCallback(response) {
console.log(response);
$scope.reportsObj.reports = response;
}, function errorCallback(error) {
console.log(error);
});
}
$interval(() => {
$scope.getReports();
},5000)
})

命令

angular.module('App').directive('reportsDirective',function(){
return {
restrict:"E",
scope:{
reportsObj:"="
},
templateUrl:"./reports-analytics.html",
link: function(scope,element,attrs){
console.log("reports",scope.reportsObj.reports);
scope.$watch('reportsObj',function(val){
console.log(val);
},true)
}
}
})

标记：用法

<reports-directive></reports-directive>

报告分析.html

<ul>
<li ng-repeat="report in reports">{{report.val}}</li>
</ul>

我尝试过这种方式，似乎不起作用， 这是最佳实践吗？我是AngularJS的新手，如果您以正确的方式指导我，我将不胜感激。

Answer 1

自定义指令中基本上有三种类型的作用域，即共享、继承、隔离。 如果不使用scope:{ reportsObj:"=" }意味着它是一个共享作用域指令，它将共享使用它的控制器的作用域。这就是为什么它会按照您的期望工作。

用另一种方法， 使用独立作用域，就像您使用的作用域一样，按如下所示更新指令代码：

angular.module('App').directive('reportsDirective',function(){
return {
scope:{
reportsObj:"="
},
templateUrl:"./reports-analytics.html",
link: function(scope,element,attrs){
// directive logic
}
}
})

并将报告控制器视图中指令的使用更新为：

<reports-directive reports-obj="reportsObj "></reports-directive>

不要更改reportsController和reports-analytics.html的代码。这也应该按预期工作。但是由于使用了"="，如果您在指令内更改 reportsObj，其值也会在外部控制器中更改。

普伦克示例。