问从控制器触发指令的更好方法
EN

Stack Overflow用户

提问于 2015-10-09 13:01:43

回答 4查看 366关注 0票数 3

我有一个指令，它需要根据控制器中服务调用的结果执行一些DOM操作。以下是我目前正在遵循的方法：

1)在每个控制器作用域中创建一个与view中的每个指令相对应的触发器对象，以便在需要时执行dom操作。

2)创建指令，根据控制器设置的值进行dom操作；

app.directive("myDirective", function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            attrs.$observe('myDirective', function (value) {
                if (value === "true") {
                    $(element).text("Scrolled to####" + $(element).data("scroll"));
                }

            });
        }
    };
});

3)在相应的控制器方法中，将值设置为true以触发指令功能

app.controller("controller1", ["$scope", function ($scope) {
    $scope.trigger1 = false;

    $scope.triggerDirective1 = function () {

        $scope.trigger1 = true;
    };
    $scope.trigger2 = false;

    $scope.triggerDirective2 = function () {

        $scope.trigger2 = true;
    };
}]);

<div id="c1" ng-controller="controller1">Controller 1
    <br>List 1
    <div my-directive="{{trigger1}}" data-scroll="20"></div>List 2
    <div my-directive="{{trigger2}}" data-scroll="30"></div>
    <button ng-click="triggerDirective1()">Trigger Directive 1</button>
    <button ng-click="triggerDirective2()">Trigger Directive 2</button>
</div>

完整的代码在这里- http://jsfiddle.net/qec35dq4/

我发现这种方法不太好，原因如下：

1)附加了指令的视图中将有多个元素

2)每个指令触发器都是independent.At的，任何时候只有一个指令会在action.Depending中，在视图中的指令数量上，我必须跟踪相应控制器中的所有触发器。

有没有更好的方法来解决这个问题，这样就可以避免在控制器中跟踪这个触发器作用域对象的依赖?我想到了使用$broadcast/$emit,$on。但不要认为这将是一个好的解决方案，.Please让我知道你的想法。

提前感谢您的帮助

编辑：

新提琴- http://jsfiddle.net/86pk8LtL/

更改了一点的例子，以反映更多的是什么，我试图实现-将有多个列表在页面上，这个指令将是applied.Based的一些逻辑从后端的一些项目，需要在列表中选择。一旦选择了项，就应该滚动列表，以便第一个选择的项出现在视图中(在本例中，我正在硬编码scrollposition using data attributes.But in reality指令来执行计算)，此指令的目的只是处理“滚动到视图”部分，这就是为什么我对保留它的范围属性持怀疑态度。请注意，当前的方法运行良好。我只是想看看有没有更好的方法。

controller

javascript

angularjs

angularjs-directive

triggers

回答 4

Stack Overflow用户

发布于 2015-10-17 11:57:02

AngularJS实际上并不像事件驱动库那样使用DOM查询。我建议使用控制器抓取。因为Angular支持OOP标准，所以尝试嵌套你的控制器，子控制器的作用域是从父控制器继承的，这意味着你可以观察到哪个元素被触发了。看一下这个基本的示例http://jsfiddle.net/qec35dq4/3/，我建议不要观察属性，而是将模型传递到指令的作用域中。这将帮助您避免观察属性更改。

最重要但不是最后的一点是，您实际上不需要关注元素的属性更改。它可以通过您的指令的attrs获得：

app.directive("myDirective", function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            attrs.$observe('myDirective', function (value) {
                if (value === "true") {
                    $("#result").text(attrs.msg);
                }

            });
        }
    };
});

编辑这里是一个基于你最新JSFiddle的demo。

票数 1

Stack Overflow用户

发布于 2015-10-13 22:13:04

上周我不得不做这样的事情。假设你不想写一个以上的指令，跨元素指令dom操作可能会很棘手，但当我这样做的时候，我通过ID查找我想要的元素，这将使你不必在作用域上定义方法。

<div id="trigger1"></div>List 2
<div id="trigger2"></div>
<button my-directive="trigger1" data-scroll="20">Trigger Directive 1</button>
<button my-directive="trigger2"  data-scroll="30">Trigger Directive 2</button>

和指令。

app.directive("myDirective", function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
                var idElem = document.getElementById(attrs.myDirective);
                var elementToChange = angular.element(idElem);
                element.on("click", function(){
                    elementToChange.text("Scrolled to####" + attrs.dataScroll);
                });
            });
        }
    };
});