Question

我有一个指令，它从http调用中获取属性值，如下所示：

控制器

app.controller("HomeController", function($scope){
  $http.get("/api/source").then(function(res){
    $scope.info = res.data
  });
});

HTML

<div ng-controller="MainController">
  <ng-mydirective data-info="{{info}}"></ng-mydirective>
</div>

指令：

app.directive("ngMydirective", function(){
  return {
    restrict: "E",
    templateUrl: "/partials/info.html", 
    link: function(scope, element, attrs){
      scope.info = attrs.info;
    }
  }
});

我正在尝试通过属性将控制器中的info变量传递给指令。它不起作用，因为变量值最初是从异步http调用创建的，所以在创建指令时，没有值。

有办法做到这一点吗？

Answer 1

您可以观察属性的值：

link: function(scope, element, attrs){
      attrs.$observe('info', function(val) {
        scope.info = val;
      })
}

此外，如果您可以将指令范围更改为隔离，则可以通过绑定值来实现：

app.directive("ngMydirective", function(){
  return {
    restrict: "E",
    scope: {info: '='},
    templateUrl: "/partials/info.html", 
    link: function(scope, element, attrs){

    }
  }
});

<div ng-controller="MainController">
   <ng-mydirective info="info"></ng-mydirective>
</div>

角度传递动态范围到指令

1 个答案: