AngularJS：从控制器访问特定的指令范围

我是棱角分明的新人，如果我错过了什么或者误解了文档，请原谅我。

我有一个指令，它将元素转换为jquery插件

.directive('myDir', function($compile) { return { link: function(scope, element, attributes) { // $('.someDiv').jqueryPlugin(...); element.jqueryPlugin(); var el = $compile("{{ 'label' }}")(scope); element.find('.label').html(el); } } }) 

正如你所看到的，首先我在html元素中创建一个jquery插件（它在内部元素中创建它的dom，包括一些带有标签类的div – 假设它包含一些应该是动态的字符串，并且应该是全局可转换的）然后我替换静态jquery生成的标签插入一个。 我应该能够从控制器管理它。

问题是，我可以在一个控制器中有很多指令，比方说

在指令和jquery运行后，它会给出一些东西，比方说，比方说

 
 
 {{label|translate}} 
 
 
 
 {{label|translate}} 
 
 
 
 {{label|translate}} 
 
 
 
 {{label|translate}} 
  

如何，从控制器，我可以管理一个特定的指令？ 如何访问所选范围的范围？

我认为

 // controller $scope.label = "some content"; 

将改变所有标签

有没有办法实现这个目标？ 或者我应该检讨问题的解决方法？

提前致谢！

编辑

我还将有dom元素，需要从控制器级别附加指令。 他们也应该从这个层面维持。 所以我的想法是提供一个服务，这将是api的某种外观，可以在jquery-plugin’ed 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; } } }; }) 

它适用于createPlugin，但不知道如何让changeLabel工作……

门面的最佳用途是来自控制器：

 toBePlugined = $('div.tbp'); facade.createPlugin(toBePlugined, 'label'); facade.changeLabel(toBePlugined, 'label2'); 

为什么我需要服务呢？ 因为我希望能够从脚本中的各个位置修改插件元素配置。 可能包括各种div，body标签等。

现在 – 我的问题是通过提供其dom对象引用来访问指令范围。 可能吗？ 我试图在dom对象上使用my-dir属性而没有任何效果。

Answer 1

可以有多种方法来解决这个问题，这里有几种方法。 根据您的需要，您可以使用带有2路（ = ）的隔离范围指令（ scope:{} ）。 您还可以使用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("{{ 'label' }}")(scope); element.find('.label').html(el); } } }); 

并从您的控制器绑定，假设您有一个标签列表。

  $scope.labels = [{label:'label1'}, {label:'label2'}, {label:'label3'}] 

然后你可以这样做：