首页 其他开发 如何从 AngularJs 中的指令中修改范围
如何从 AngularJs 中的指令中修改范围
[英] How to modify scope from within a directive in AngularJs
本文介绍了如何从 AngularJs 中的指令中修改范围的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要在指令内的回调中修改根范围属性.但是该指令位于由 switch 指令创建的内部范围内.
HTML
<p>已选择:{{已选择}}</p><div ng-switch on="selected"><div ng-switch-default><p>项目:{{选定的}}</p><custom-tag selected-item="selected"/>
<div ng-switch-when="新值"><p>工作</p>
JavaScript
angular.module('app', []).directive("customTag", [function () {返回 {限制:E"，替换:真的，模板: "小提琴:http://jsfiddle.net/nJ7FQ/
我的目标是能够在选定区域中显示新值".我怎样才能完成我想要做的事情?我做错了什么?
此外，因为我正在尝试制作一个组件.有没有办法做同样的事情，但有一个独立的范围?
解决方案
我更新了 fiddle，基本上不得不去父级获取正确的selected"变量，还使用了isolate scope = 来获取两者之间的双向绑定传入的值和内部模型.
http://jsfiddle.net/nJ7FQ/2/
angular.module('app', []).directive("customTag", [function () {返回 {限制:E"，替换:真的，模板: "和 HTML
<p>已选择:{{已选择}}</p><div ng-switch on="selected"><div ng-switch-default><p>项目:{{选定的}}</p><custom-tag selected-item="selected" model="$parent"/>
<div ng-switch-when="新值"><p>工作</p>
更新小提琴以使用您对属性的原始读取:http://jsfiddle.net/nJ7FQ/4/
I need to modify a root scope attribute from within a callback inside a directive. But the directive is in a inner scope created by a switch directive.
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';
}
Fiddle: http://jsfiddle.net/nJ7FQ/
My objective is to be able to display "New value" in the Selected area.
How can I accomplish what I am trying to do? What am I doing wrong?
Besides, as I am trying to make a component. Is there a way to do the same but with an isolated scope?
解决方案
I updated the fiddle, basically had to go to the parent to get the right "selected" variable, also used the isolate scope = to get two way binding between the value passed in and the internal model.
http://jsfiddle.net/nJ7FQ/2/
angular.module('app', [])
.directive("customTag", [function () {
return {
restrict: "E",
replace: true,
template: "<input type='button' value='Click me' />",
scope: {model:'='},
link: function (scope, element, attrs) {
element.bind('click', function () {
scope.model[attrs.selectedItem] = "New value";
scope.$apply();
});
}
};
}]);
function AppController($scope) {
$scope.selected = 'Old value';
}
and the 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>
Updated the fiddle to use your original reading of the property from the attribute:
http://jsfiddle.net/nJ7FQ/4/
这篇关于如何从 AngularJs 中的指令中修改范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
