Angularjs 每5秒向指令传递异步数据

控制器

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>

reports-analytics.html

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

{{report.val}

我试过这种方法，但似乎不起作用，

---

这是最佳实践吗？我是angularjs新手，如果您能以正确的方式指导我，我将不胜感激。

基本上，自定义指令中有三种类型的作用域，即共享、继承和隔离。 如果您不使用

范围：{reportsObj:“=”}

意味着它是一个共享范围指令，它将共享使用它的控制器的范围。这就是为什么它能满足你的期望

用另一种方式,， 使用隔离作用域就像您使用的一样，按如下方式更新指令代码：

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

并将reportsController视图中的指令用法更新为：

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

不要更改

reportsController

和

reports analytics.html

的代码。这也应该像预期的那样起作用。但由于使用了“=”，如果在指令内部更改reportsObj，其值在控制器外部也会更改

---

Plunker

基本上，自定义指令中有三种类型的作用域，即共享、继承和隔离。 如果您不使用

范围：{reportsObj:“=”}

意味着它是一个共享范围指令，它将共享使用它的控制器的范围。这就是为什么它能满足你的期望

用另一种方式,， 使用隔离作用域就像您使用的一样，按如下方式更新指令代码：

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

并将reportsController视图中的指令用法更新为：

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

不要更改

reportsController

和

reports analytics.html

的代码。这也应该像预期的那样起作用。但由于使用了“=”，如果在指令内部更改reportsObj，其值在控制器外部也会更改

---

Plunker

报告控制器是视图的控制器，对吗？&不是指令的控制者？在该视图中，您使用的是指令，对吗？是的，对，并且我删除了作用域：{reportsObj:“=”}它现在正在工作，不知道wt正在发生。reportsController是您视图的控制器，对吗？&不是指令的控制者？在这个视图中，您使用的是指令，对吗？是的，对，我删除了作用域：{reportsObj:“=”}它正在工作，现在不知道wt正在发生。