AngularJS:从控制器访问特定的指令范围
AngularJS : Accessing particular directive scope from controller
我是Angular的新手,所以如果我错过了什么或误解了文档,请原谅我。
我有一个指令,它将元素转换为jquery插件
.directive('myDir', function($compile) {
return {
link: function(scope, element, attributes) {
// $('.someDiv').jqueryPlugin(...);
element.jqueryPlugin();
var el = $compile("<span translate>{{ 'label' }}</span>")(scope);
element.find('.label').html(el);
}
}
})
如您所见,首先我在 html 元素中创建了一个 jquery 插件(它在元素内创建其 dom,包括一些带有标签类的div - 假设它包含一些应该是动态的字符串,并且应该全局可翻译),然后我将静态 jquery 生成的标签替换为插值标签。我应该能够从控制器管理它。
问题是,我可以在一个控制器中有很多指令,比方说
<div my-dir class="label-inside-1"></div>
<div my-dir class="label-inside-2"></div>
<div my-dir class="label-inside-3"></div>
<div my-dir class="label-inside-4"></div>
在指令和jQuery运行之后,它会给出一些东西,比如说
<div my-dir class="label-inside-1">
<div class="label">
<span>{{label|translate}}</span>
</div>
</div>
<div my-dir class="label-inside-2">
<div class="label">
<span>{{label|translate}}</span>
</div>
</div>
<div my-dir class="label-inside-3">
<div class="label">
<span>{{label|translate}}</span>
</div>
</div>
<div my-dir class="label-inside-4">
<div class="label">
<span>{{label|translate}}</span>
</div>
</div>
如何从控制器管理特定指令? 如何访问所选范围?
我假设
// controller
$scope.label = "some content";
将更改所有标签
有没有办法实现目标?还是我应该审查解决问题的方法?
提前感谢!
编辑
我还将有 dom 元素,这些元素需要从控制器级别附加指令。 它们也应该可以从此级别进行维护。 所以我的想法是提供一种服务,这将是某种带有API的外观,可以在jQuery插件的DOM元素上工作。
所以让我们说我需要一些东西
.provider('facade', function() {
this.$get = function($rootScope, $compile) {
return {
createPlugin: function(domElement, defaultLabel) {
domElement.attr('my-dir', defaultLabel);
$compile(domElement)($rootScope);
},
changeLabel(domElement, newLabel) {
// get a scope of myDir for provided dom element
scope.label = newLabel;
}
}
};
})
它适用于创建插件,但不知道如何让 changeLabel 工作......
立面的最佳用法是来自控制器:
toBePlugined = $('div.tbp');
facade.createPlugin(toBePlugined, 'label');
facade.changeLabel(toBePlugined, 'label2');
为什么我需要为此提供服务? 因为我希望能够从脚本中的不同位置修改插件元素配置。 这可能包括各种div、body tag 等。
现在 - 我的问题是通过提供其 DOM 对象引用来访问指令范围。 可能吗?我试图在 dom 对象上使用 my-dir 属性,但没有效果。
可能有多种方法可以解决这个问题,这里有几种方法。您可以根据需要将独立作用域指令 (scope:{}
) 与 2 路 (=
) 一起使用。你也可以使用 scope:true
,即从指令创建一个子作用域(如果与 ng-repeat 一起使用,您甚至可以在没有作用域的情况下使用它,因为它已经创建了一个子作用域)。但是,与具有自己的协定(隔离范围)的指令相比,这种方法的可重用性/灵活性较低。
因此,您可以将指令更改为:
.directive('myDir', function($compile) {
return {
scope:{
label:'=myDir' //Set up 2 way binding
},
link: function(scope, element, attributes) {
// $('.someDiv').jqueryPlugin(...);
element.jqueryPlugin();
var el = $compile("<span translate>{{ 'label' }}</span>")(scope);
element.find('.label').html(el);
}
}
});
并从控制器绑定,假设您有一个标签列表。
$scope.labels = [{label:'label1'}, {label:'label2'}, {label:'label3'}]
然后你可以做:
<div ng-repeat="item in labels" my-dir="item.label"></div>
- AngularJS指令范围约束问题重复出现
- AngularJS:从控制器访问特定的指令范围
- 隔离范围-仅在指令范围内定义的值必须执行更改
- 指令范围
- 在ng重复中使用时的指令范围
- 角度指令模板输入不会更新指令范围
- 属性内的角度指令范围继承
- AngularJS:如何在指令范围的对象发生变化时更新与控制器作用域相关联的控制器作用域
- 如何从父指令/控制器访问指令范围
- AngularJS:在成功的HTTP请求后更新指令范围
- 购物指令范围问题
- 角度指令范围为空
- 在指令“范围”中需要值属性
- AngularJS 指令范围和$compile - 返回空白的变量
- AngularJS指令范围似乎只接受一个参数
- AngularJS :如何从相同的指令控制器访问指令范围
- 通过指令范围传递对象不起作用
- 指令范围重写父值
- 角度指令 - 范围返回 0 而不是值
- AngularJS 父指令范围来自内部 ng-transclude