使用 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？）

[编辑] 感谢您的帮助。不确定这是否是一种做事的好方法，但我想我可以通过将此链接函数添加到指令中来获得我想要的行为（在将隔离范围上的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。

希望这不会太令人困惑..