AngularJS：从访问控制特定指令范围 [英] AngularJS : Accessing particular directive scope from controller

问题描述

我是新来的角，所以请原谅我，如果我错过了什么或者误解的文档。

I'm new to angular, so forgive me if I missed anything or misunderstand the docs.

我有一个指令，它的元素转换为jQuery插件

I have a directive, which converts the element to jquery plugin

.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，包括一些分度，标签类 - 可以说，它包含了一些字符串应该是动态的，而应该是意译的全球）和然后，我代替静态的jQuery生成的标签插之一。我应该能够从控制管理。

as you can see, first I create a jquery plugin in html element (it creates its dom inside element, including some div with label class - lets say it contains some string that should be dynamic, and should be translateable globally) and then I replace static jquery-generated label to interpolated one. I should be able to manage it from controller.

问题是，我可以有很多指令在一个控制器，让我们说

the problem is, that I can have many directives in one controller, let's say

<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运行它会给以后的东西，比如，假设

after directive and jquery is run it would give something, like, let's say

<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>

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

how, from the controller, can I manage a particular directive? how to access the scope for a chosen one?

我假定

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

将改变所有标签

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

is there a way to achieve the goal? Or should I review the approach to the problem?

在此先感谢！

修改

我也将有DOM元素，这将需要具有来自控制器级附指令。它们也应该从这个水平维护。所以我的想法是提供服务，这将是某种与API的门面，这将jQuery的-plugin'ed DOM元素的工作。

I will also have dom elements, that would need to have directive attached from the controller level. they should also be maintainable from this level. so my idea is to provide a service, that would be some kind of facade with api, that would work on jquery-plugin'ed dom elements.

所以可以说，我需要的东西。

so lets say I would need something

.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工作...

it works for createPlugin, but no idea how to get changeLabel working...

门面的最佳用法是从控制器：

Best usage of the facade would be from controller:

toBePlugined = $('div.tbp');

facade.createPlugin(toBePlugined, 'label');
facade.changeLabel(toBePlugined, 'label2');

为什么我需要一个服务？因为我希望能够从脚本中的各个地方修改pluginned要素配置。可能包括各种申报单，body标签等。

why do I need a service for that? because I want to be able to amend pluginned elements configuration from various places in the script. that could include various divs, body tag, etc.

和现在 - 我的问题是provading其DOM对象引用访问指令范围。可能吗？我试图用DOM对象在我-dir属性没有效果的发挥。

and now - my problem is to access the directive scope by provading its dom object reference. is it possible? I was trying to play with my-dir attribute on dom object with no effect.

推荐答案

有可能是多种方式来解决这个问题，这里有几种方法。你可以使用隔离范围的指令（范围：{} ）与2路（ = ），根据你怎么上需要它。你也可以使用范围：真正的，即从该指令创建一个子作用域（如果使用NG-重复，你甚至可以不带范围内使用它，因为它已经创建一个子范围）。但相比与它自己的合同（分离范围）指令这种做法就不太可重复使用/灵活。

There could be multiple ways to solve this, here are a couple of ways. You could use isolated scoped directive (scope:{}) with 2-way (=), based on how you need it. You could also use scope:true, i.e creating a child scope from the directive (if using with ng-repeat you can even use it with no scope since it already creates a child scope). But this approach would be less reusable/flexible as compared to the directive with its own contract(isolate scoped).

所以，你可以你的指令更改为：

So you could change your directive to:

.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);
        }
    }
});

和从控制器绑定，说你有标签的列表。

and bind from your controller, say you have a list of labels.

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

，那么你可以只是做：

then you could just do:

<div ng-repeat="item in labels" my-dir="item.label"></div>

这篇关于AngularJS：从访问控制特定指令范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！