从控制器触发指令的更好方法
我有一个指令，它需要根据控制器中服务调用的结果执行一些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指令来执行计算)，此指令的目的只是处理“滚动到视图”部分，这就是为什么我对保留它的范围属性持怀疑态度。请注意，当前的方法运行良好。我只是想看看有没有更好的方法。
回答 4
Stack Overflow用户
发布于 2015-10-17 19: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。
Stack Overflow用户
发布于 2015-10-14 06: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);
});
});
}
};
});Stack Overflow用户
发布于 2015-10-17 17:10:30
看看这条指令：https://github.com/iameugenejo/ngScrollTo这似乎是实现你想要的东西的一种很好的方式。
https://stackoverflow.com/questions/33038984
复制相似问题
腾讯云开发者
