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

AngularJS : Accessing particular directive scope from controller

本文关键字:指令 范围 访问 控制器 AngularJS      更新时间:2023-09-26

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