我需要在一个指令内的回调内修改根范围属性。但是,该指令位于由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 =来获取与传递的值和内部模型之间的双向绑定。
原文链接:https://www.f2er.com/angularjs/145030.htmlangular.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/