AngularJS - 接受對象或方法的指令參數

我有一個接受對象作爲參數的指令。我想傳遞給這個參數，無論是對象還是返回對象的方法。AngularJS - 接受對象或方法的指令參數

您可以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>

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

什麼是實現我後正確的做法？

來源

2017-10-10 m.spyratos

這不行。你不能將一個函數綁定到這樣的指令。每當指令被評估時（當發生'$ digest'循環時），函數返回一個新的對象，其值與前一個對象**相同，導致一個新的'$ digest'循環，導致函數再次評估，導致一個新的'$ digest'等，直到角停止不可避免的無限循環。 – Claies

@Claies謝謝。你有什麼建議嗎？你可以看看這種方法（[https://jsfiddle.net/5wax9acc/4/](https://jsfiddle.net/5wax9acc/4/）），讓我知道你是否可以看到任何缺點？ –

你最後一個小提琴看起來是一個很好的解決方案。 – dfsq

所以我發現它正在對指令進行如下輕微修改：

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

這是solution on JsFiddle。

正如@Claies提到的，如果指令不需要指定參數綁定和功能應該同步返回一個值，這會工作。

來源

2017-10-10 16:27:09

設置兩個參數爲你的指令之一的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 ... 
    } 
}

來源

2017-10-10 14:20:37

謝謝。我知道這雖然有效。我特別尋找使用相同屬性的解決方案，因爲預期的輸入數據是相同的。 –

AngularJS - 接受對象或方法的指令參數

回答

相關問題