Question

我有一个指令接受一个对象作为参数。我想将对象或返回对象的方法传递给此参数。

你可以view on JsFiddle，这是代码：

HTML

<div ng-controller="Ctrl as vm">
  <my-directive user="{id: 1, name: 'Mike'}"></my-directive>
  <my-directive user="vm.getUser()"></my-directive>
</div>

JS

var app = angular.module('myApp', []);

app.controller('Ctrl', function() {
  var vm = this;

  this.getUser = function() {
    return {id: 2, name: 'John'};
  };
})

app.directive('myDirective', function() {
  return {
    bindToController: {
      user: '='
    },
    controller: function() {
      var vm = this;
    },
    controllerAs: 'vm',
    replace: true,
    restrict: 'EA',
    scope: {},
    template: '<div>Name: {{vm.user.name}}</div>'
  };
});

如果我像上面那样将参数的类型设置为=，我会收到以下错误：

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

AngularJS - Error Reference

实现我追求目标的正确方法是什么？

Answer 1

为你的指令设置两个参数，一个用于obj，另一个用于函数，在你的控制器中检查哪一个有数据：

<my-directive userObject="{id: 1, name: 'Mike'}" userFunction="vm.getUser()"></my-directive>

和控制器将是这样的：

    controller: function() {
    if($scope.userObject){
        //do something ...
    }else if ($scope.userFunction){
        //do something else ... 
    }
}

Answer 2

所以我发现它正在对指令进行以下微调：

...
bindToController: {
  userInput: '&user'
},
controller: function() {
  var vm = this;
  vm.user = (typeof vm.userInput === 'function' ? vm.userInput() : vm.userInput);
},
...

这里是solution on JsFiddle。

正如@Claies所提到的，如果指令不需要绑定指定的参数，并且函数应该同步返回一个值，这将有效。

AngularJS - 接受对象或方法的指令参数

2 个答案: