Javascript Angular JS:如何设置可以在模板中使用的指令本地范围的属性?
我想在指令中访问本例中的变量map,而不必像将其设置为directrive map=“someValue”的attr那样预定义它。而且我也不想使用scope.$apply,因为我实际上只希望变量位于指令的独立作用域中。这可能吗? 这里的最佳实践是什么?基本上,我的指令需要两者兼而有之。访问父作用域并拥有自己的作用域,我可以使用它来构建模板 谢谢大家 下面是我的Js代码:Javascript Angular JS:如何设置可以在模板中使用的指令本地范围的属性?,javascript,angularjs,directive,Javascript,Angularjs,Directive,我想在指令中访问本例中的变量map,而不必像将其设置为directrive map=“someValue”的attr那样预定义它。而且我也不想使用scope.$apply,因为我实际上只希望变量位于指令的独立作用域中。这可能吗? 这里的最佳实践是什么?基本上,我的指令需要两者兼而有之。访问父作用域并拥有自己的作用域,我可以使用它来构建模板 谢谢大家 下面是我的Js代码: .directive('myFilter', function() { return { restri
.directive('myFilter', function() {
return {
restrict: 'E',
scope: {
source: '=source',
key: '=key',
},
link: function(scope, element, attrs) {
scope.$on('dataLoaded', function(e) {
scope.map = {};
angular.forEach(scope.source, function(paramObj) {
if (!scope.map[paramObj[scope.key]]) {
var newEntry = {
value: paramObj[scope.key],
isChecked: false
}
scope.map[paramObj[scope.key]] = newEntry;
}
});
});
}
}
});
和我的html:
<my-filter source="metaPara.filteredParameters" key="'value'">
<table class="table table-borered">
<tr data-ng-repeat="item in map">
<td>{{item.value}}</td>
</tr>
</table>
</my-filter>
{{item.value}}
您可能想再次参考Angular文档了解指令
如果您想要一个隔离作用域(一个不能访问祖先的作用域),那么使用
scope : { /* ... */ }
否则,如果您想要一个唯一的作用域,该作用域可以访问祖先,请使用
scope : true
然后,您可以将HTML修改或事件侦听(不依赖于ng click或其他内容)放入
…您可以将所有常规实现放在
controller : ["$scope", function ($scope) {
var myController = this;
myController.property = "12";
}],
controllerAs : "myController"
因此,在模板中,您可以说:
<span>{{ myController.property }}</span>
另外,我建议使用$timeout
(必须注入),而不是使用$scope.$apply
不同之处在于,$scope.$apply
只在某些点起作用——如果您已经在摘要周期内,它将抛出一个错误,而不会更新任何内容。$timeout()
将更新设置为在下一个更新周期内进行
理想情况下,您应该知道是否需要一个
$apply
,并且能够保证每次更新/摘要只在一个点上使用它,但是$timeout
会将您从那些您不一定确定的点上解救出来。如果使用=key或其他什么,它会双向绑定到控制器范围变量。如果使用&key,则不会。这就是你需要做的吗?试着给指令一个控制器,而不是“链接”;然后,您应该能够在控制器中创建一个$scope变量,该变量可用于模板,但不会向使用该指令的人公开(我认为),谢谢。这正是我想要的。
<span>{{ myController.property }}</span>
controller : "mySimpleController",
controllerAs : "myController"