angularjs - 如何在指令中修改作用域的值

Question

在指令中，我想在单击按钮时修改表达式的值。以下代码仅在我的指令中本地修改值。我也想更改此指令之外的值。我怎样才能做到这一点？

        scope: false,
        link: function (scope, el, attrs) {
            //toggle the state when clicked
            el.bind('click', function () {
                scope[attrs.ngModel] = !scope[attrs.ngModel];
            });

Plunker：http ://plnkr.co/edit/xqYBnz5BHLP844kXJXKs?p=preview

Answer 1

问题在于 ng-model 中的绑定表达式。因为它有'。在其中，您需要使用$parse来正确获取和设置值。在此处查看一些文档

就像是

 var getter=$parse(attrs.ngModel);
 var setter=getter.assign;
 setter(scope,!getter(scope));

在此处查看我更新的 plunkr http://plnkr.co/edit/VAE43y5cagCF8jq5AlaY?p=preview

基本设定

scope[attrs.ngModel] = !scope[attrs.ngModel]

创建一个新属性user.active。设置它应该是scope['user']['active'];

Answer 2

另一种方法是创建一个隔离作用域并在您的指令中传递一个属性，该属性将其链接到父作用域中的一个方法，该方法将完成翻转状态的工作。

粗略的例子：

在您的指令定义中：

scope: {
    flipState: '&'
},
link: function (scope, elem, attr) {
    elem.bind('click', function () {
        flipState();
    }
}

在您看来：

<div ng-controller="MyController">
    /* ... */
    <button directivename flip-state="flipStateFunc()"></button>
</div>

在你的控制器中MyController：

flipStateFunc: function () {
    $scope.state = !$scope.state;
}

Answer 3

由于您没有创建新范围，因此您应该能够通过scopenot访问模型attrs

在指令中，将范围更改为

scope: {
    ngModel: '='
},

并更改范围。$ 适用于

scope.$apply(function () {
    if (scope.ngModel) {
        off();
        scope.ngModel = false;
    } else {
        on();
        scope.ngModel = true;
    }
});

DEMO