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

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函数的结果。

见下文：

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()) 
 
    } 
 
    } 
 
});

<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 2

当你通过函数传递你的范围，你必须使用 '&'

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>