使用AngularJS在HTML中設置雙向綁定指令屬性

Question

我只是從AngularJs開始，遇到了一個問題，可能是由於無法正確理解指令/控制器/隔離范圍所致。 我正在嘗試找到一種方法來將html中的指令屬性設置為true / false，並使控制器上的屬性與此屬性保持一致。 我正在使用的是：

1. 具有signUpEnabled屬性的控制器（ LoginController ）

2. 一條指令（ myLogin ），它返回以下內容：

     var directive = { bindToController: true, controller: 'LoginController', controllerAs: 'loginVm', templateUrl: 'login/my-login.directive.html', restrict: 'E', scope: { signUpEnabled: '=' } }; 

3. 使用偽指令的HTML如下：

   <my-login sign-up-enabled="true">

我得到錯誤： Error: [$compile:nonassign] Expression 'true' used with directive 'frintLogin' is non-assignable!

當我在HTML中將signUpEnabled設置為false時，它可以正常工作-可能是因為該屬性是在控制器中初始化的。 我是要解決這個問題，還是錯過了什么（例如在指令的鏈接函數中觀看signUpEnabled ？）

[edit]感謝您的幫助。 不知道這是否是一種好的處理方法，但是我認為可以通過將此鏈接函數添加到指令中來獲得所需的行為（在將隔離范圍上的signUpEnabled綁定更改為'@' ）：

    function link(scope, element, attrs, ctrl) {
        $timeout(function() {
            ctrl.signUpEnabled = scope.$eval(attrs.signUpEnabled)
        });            ;
    }

Answer 1

兩種方式的綁定意味着您可以執行scope.signUpEnabled = something以及something = scope.signUpEnabled 。 由於您在指令中設置了sign-up-enabled="true" ，因此會出現該錯誤，因為您可能無法將"true"設置為任何值。

聽起來您需要@綁定。 這樣一來，您就可以將sign-up-enabled屬性設置為字符串。

編輯：糟糕，您剛剛意識到您正在嘗試使值與控制器變量保持一致。 在這種情況下，將綁定保持為=而是設置sign-up-enabled=scopeFieldFromController 。 您還需要在控制器中初始化$scope.scopeFieldFromController=true 。

希望那不會太混亂。