使用 AngularJS 在 HTML 中设置双向绑定指令属性

Question

我刚开始 AngularJs 并且运行遇到了一个问题，这可能是由于没有正确理解指令/控制器/隔离范围造成的。我正在尝试找到一种方法，将指令属性从 html 设置为 true/false，并使控制器上的属性与该属性保持一致。我正在使用的是：

控制器 (LoginController) 属性 signUpEnabled

一个指令 (myLogin) returns 这个:

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

HTML 指令的用法如下：

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

我收到错误：Error: [$compile:nonassign] Expression 'true' used with directive 'frintLogin' is non-assignable!

当我在 HTML 中将 signUpEnabled 设置为 false 时它工作正常 - 可能是因为这就是属性在控制器中初始化的内容。我是不是做错了，或者我错过了什么（比如在指令的 link 函数中观看 signUpEnabled？）

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

希望不要太混乱..

使用 AngularJS 在 HTML 中设置双向绑定指令属性

Setting a two-way bound directive attribute in the HTML with AngularJS

javascript

angularjs

angularjs-directive

angularjs-controller