Question

我试图通过调用包含页面控制器上的函数来设置指令属性的值，但它并没有按预期工作。在下面的代码中，＆＃34; make＆＃34;对象没有＆＃34; modelList＆＃34;属性，所以我必须单独调用服务器来获取每个make。

<div ng-repeat="make in makeList">
  <model-list-directive model-list="getModelList(make)" />
</div>

app.controller("myController",function($scope) {
  $scope.getModelList = function(make) {
  return null;
  //return myService.getModelList(make);
 };
})

app.directive("modelListDirective",function() {
  restrict:'E',
  scope: {
    modelList: '='
  },
  template: '<ul><li ng-repeat="model in modelList">{{model.modelName}}</li></ul>',
  controller: ['$scope', function ($scope) {
  }]

如果将getModelList（）函数设置为返回null（未在代码中注释掉），则不会给出错误，但会多次调用该函数（通常在3到5之间随机变化）。

当我调用myService.getModelList（make）时，真正的问题出现了（在代码中注释掉了）。这会导致对服务的无限循环调用，从而导致浏览器崩溃。

我猜这是因为双向绑定，但我不确定。

有没有更好的方法来获取指令的动态数据？

Answer 1

我认为问题的一部分是你的指令定义没有返回一个对象。它应该是这样的：

app.directive('modelListDirective',function() {
    return { // <-- need to return an object
        restrict:'E',
        scope: {
            modelList: '='
        },            
        template: '<ul><li ng-repeat="model in modelList">{{model.modelName}}</li></ul>',
        controller: ['$scope', function ($scope) {
        }]
    };
});

但是，您将一个函数作为双向绑定传递给指令，您不应该这样做。请参阅this对类似问题的回答。

您可以做的是直接将myService注入您的指令，然后在其myService.getModelList()函数中调用link指令。

所以你的标记看起来像这样：

<div ng-repeat="make in makeList">
  <model-list-directive make="{{make}}" />
</div>

每个指令实例只需要make。

你的指令定义如下：

app.directive('modelListDirective', ['myService', function(myService) {
    return {
        restrict:'E',
        scope: {
            make: '@'
        },
        link: function (scope, element, attrs) {
            scope.modelList = myService.getModelList(scope.make);
        },
        template: '<ul><li ng-repeat="model in modelList">{{model.modelName}}</li></ul>',
        controller: ['$scope', function ($scope) {
        }]
    };
}]);

在scope.modelList函数中设置link。

Here's a fiddle

通过调用函数设置角度指令属性

1 个答案: