使用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 。

希望那不会太混乱。