如何修改AngularJ中的指令范围

发布时间：2020-12-17 08:24:38 所属栏目：安全来源：网络整理

导读：我需要在一个指令内的回调内修改根范围属性。但是，该指令位于由switch指令创建的内部范围内。 HTML div ng-app="app" ng-controller='AppController' pSelected: {{ selected }}/p div ng-switch on="selected" div ng-switch-default pItem: {{ selected }

我需要在一个指令内的回调内修改根范围属性。但是，该指令位于由switch指令创建的内部范围内。

HTML

<div ng-app="app" ng-controller='AppController'>
    <p>Selected: {{ selected }}</p>
    <div ng-switch on="selected">
        <div ng-switch-default>
            <p>Item: {{ selected }}</p>
            <custom-tag selected-item="selected" />
        </div>
        <div ng-switch-when="New value">
            <p>Worked</p>
        </div>
    </div>
</div>

JavaScript

angular.module('app',[])    
    .directive("customTag",[function () {
    return {
        restrict: "E",replace: true,template: "<input type='button' value='Click me' />",link: function (scope,element,attrs) {
            element.bind('click',function () {
                scope[attrs.selectedItem] = "New value";
                scope.$apply();
            });
        }
    };
}]);

function AppController($scope) {
    $scope.selected = 'Old value';
}

小提琴：http://jsfiddle.net/nJ7FQ/

我的目标是能够显示“新价值”。在选区。
我该如何完成我想要做的事情？我究竟做错了什么？

此外，因为我正在尝试制作一个组件..有没有办法做同样的但是有孤立的范围？

我更新了小提琴，基本上不得不去父母获得正确的“选择”变量，也使用了isolate scope =来获取与传递的值和内部模型之间的双向绑定。

http://jsfiddle.net/nJ7FQ/2/

angular.module('app',[])

    .directive("customTag",scope: {model:'='},function () {
                scope.model[attrs.selectedItem] = "New value";
                scope.$apply();
            });
        }
    };
}]);

function AppController($scope) {
    $scope.selected = 'Old value';
}

和HTML

<div ng-app="app" ng-controller='AppController'>
    <p>Selected: {{ selected }}</p>
    <div ng-switch on="selected">
        <div ng-switch-default>
            <p>Item: {{ selected }}</p>
            <custom-tag selected-item="selected" model="$parent" />
        </div>
        <div ng-switch-when="New value">
            <p>Worked</p>
        </div>
    </div>
</div>

更新小提琴以使用您的属性的原始阅读属性：
http://jsfiddle.net/nJ7FQ/4/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!