2
我使用的角度来触发一个下拉式选单，在这个应用程序的情况下，加载在下拉菜单中的内容显示它之前。我想实现的是能够向下拉指令添加到一个元素，但重要的是，我想下拉到后出现的元素，里面它不，因为各种不同的元素可以用来触发此落下。角事件处理程序的属性更改不触发听众
我已经得到了所有这方面的工作，但我觉得好像它并不像角的，因为它似乎需要手动$scope.$apply()，并在我看来，如果我有工作，应该是不必要的，我想Angular的流量。同样，因为这被用于提高悬停菜单，所以如果鼠标经过几个触发元素，Angular会对多个应用调用感到不安。
的简化版本看起来是这样，对于HTML：
<div ng-app="example">
<div example-hover>
Hover me
</div>
</div>
用下面的JS：
var app = angular.module('example', []);
angular.module("example")
.controller("exampleHoverController", function($scope) {
$scope.showHoverList = false;
$scope.setHoverList = function(value) {
console.log("Set hoverlist value: "+value);
this.showHoverList=value;
$scope.$apply();
}
});
angular.module("example")
.directive("exampleHover", function($compile) {
return {
restrict: "A",
template: '',
controller: 'exampleHoverController',
link: function(scope, element) {
element.after('<example-dropdown></example-dropdown>');
$compile(element.parent().find('example-dropdown'))(scope);
element.bind("mouseover", function() {
scope.showHoverList = true;
scope.setHoverList(true);
});
element.bind("mouseout", function() {
scope.showHoverList = false;
scope.setHoverList(false);
});
}
}
});
angular.module("example")
.directive("exampleDropdown", function() {
return {
restrict: 'E',
replace: true,
template: '<div ng-show="showHoverList">I should be visible when hovered!</template>',
controller: "exampleHoverController"
};
});
强制性JSFiddle link。请注意，这是工作的代码，我的问题是：如何能够做到同样的事情，而无需调用$scope.$apply当我更新的exampleHoverController控制器财产？
我知道有更简单的方法来实现这种效果，如果我提前知道我的所有数据，但此代码的实际版本做的比这个例子多得多，我需要能够附加悬停菜单到任何元素，然后在显示时执行一些背景查询，所以如果不是这种确切的模式，我真的需要一些与此行为相匹配的东西。
你需要调用$范围。$适用，因为事件从角执行上下文外面传来。在这里使用它不是黑客或坏事，这几乎就是它的用武之地。尽管如此，你应该将它直接移动到事件回调函数中。 – yscik