Question

我在我的作用域上声明了一个返回一个对象的函数。我尝试将此函数的结果传递给自定义指令，但它会触发无限的摘要循环（打开控制台并运行代码段）。

似乎观察者没有设置objectEquality标志，这就是角度没有进行深度比较的原因。

我做错了什么？是否有可能实现或者我反对Angular原则？

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.bar = function() {
    return {
      baz: 'qux'
    };
  };
}).directive('myDirective', function() {
  return {
    restrict: 'E',
    scope: {
      foo: '='
    }
  }
});

<script src="https://code.angularjs.org/1.3.16/angular.js"></script>

<div ng-app="plunker">
  <div ng-controller="MainCtrl">
    <my-directive foo="bar()"></my-directive>
  </div>
</div>

Answer 1

尝试使用单向绑定（&）。这会将getter函数附加到指令范围，您可以使用该函数来获取bar函数的结果。

见下文：

＆＃13;

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.bar = function() {
    return {
      baz: 'qux'
    };
  };
}).directive('myDirective', function() {
  return {
    restrict: 'E',
    scope: {
      foo: '&'
    },
    link: function(scope){
      console.log(scope.foo())
    }
  }
});

＆＃13;

<script src="https://code.angularjs.org/1.3.16/angular.js"></script>

<div ng-app="plunker">
  <div ng-controller="MainCtrl">
    <my-directive foo="bar()"></my-directive>
  </div>
</div>

＆＃13;

Answer 2

当您通过功能传递范围时，您必须使用'＆amp;'

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.bar = function() {
    return {
      baz: 'qux'
    };
  };
}).directive('myDirective', function() {
  return {
    restrict: 'E',
    scope: {
      foo: '&'
    }
  }
});

<script src="https://code.angularjs.org/1.3.16/angular.js"></script>

<div ng-app="plunker">
  <div ng-controller="MainCtrl">
    <my-directive foo="bar()"></my-directive>
  </div>
</div>

如何将函数调用的结果传递给指令？

2 个答案: