问题描述
使用 Angular 我创建了一个这样的指令:
角度.module('我的模块', []).directive('myDirective', function () {返回 {限制:'E',templateUrl: currentScriptPath.replace('.js', '.html'),范围: {场景:'='},控制器:MyDirectiveController,控制器为:'vm',bindToController: 真,替换:真}});
MyDirectiveController
:
MyDirectiveController.$inject = ['$scope'];函数 MyDirectiveController($scope) {var vm = 这个;vm.scenarios = $scope.scenarios;}
我的指令 HTML 模板是这样的:
{{vm.scenarios[0].name}}
在我的父视图 HTML 中,我以这种方式使用指令:
<my-directive scripts="vm.scenarios"></my-directive>
父控制器有一个属性:
vm.scenarios = []//可以是 [{ name : "test"}]
由于父控制器的 vm.scenarios
在 $http 调用后被设置,当指令控制器的 vm.scenarios
绑定到$scope.scenarios
并且当父控制器 vm.scenarios
最终被填充时它不会更新.
将此添加到我的指令控制器时,它可以工作,但解决方案对我来说似乎是错误的:
$scope.$watch('scenarios', function(newValue) {如果(新值!== 未定义){vm.scenarios = $scope.scenarios;}});
这是你应该如何定义你的指令控制器:
MyDirectiveController.$inject = [];函数 MyDirectiveController() {//这里没有什么}
您不需要使用$scope
,因为您已经绑定到控制器实例this
.这意味着范围配置
范围:{场景:'='},
填充控制器实例 this
对象,而不是 $scope
对象,因此 $scope.scenarios
是 undefined
.使用 vm.scenarios = $scope.scenarios;
在控制器中,您只需用未定义的值覆盖正确的绑定.
演示: http://plnkr.co/edit/lYg15Xpb3CsbQGIb37ya?p=预览
Using Angular I created a directive like this:
angular
.module('my-module', [])
.directive('myDirective', function () {
return {
restrict: 'E',
templateUrl: currentScriptPath.replace('.js', '.html'),
scope: {
scenarios: '='
},
controller: MyDirectiveController,
controllerAs: 'vm',
bindToController: true,
replace: true
}
});
MyDirectiveController
:
MyDirectiveController.$inject = ['$scope'];
function MyDirectiveController($scope) {
var vm = this;
vm.scenarios = $scope.scenarios;
}
My directive HTML template is this:
<div>{{vm.scenarios[0].name}}</div>
In my parent view HTML I'm using the directive this way:
<my-directive scenarios="vm.scenarios"></my-directive>
The parent controller has a property:
vm.scenarios = [] // could be [{ name : "test"}]
As the vm.scenarios
of the parent controller gets set after an $http call it is not available when the vm.scenarios
of the directive controller is bound to the $scope.scenarios
and it doesn't get updated when the parents controller vm.scenarios
gets populated eventually.
When adding this to my directives controller, it works but the solution seems wrong to me:
$scope.$watch('scenarios', function(newValue) {
if (newValue !== undefined) {
vm.scenarios = $scope.scenarios;
}
});
This is how you should define your directive controller:
MyDirectiveController.$inject = [];
function MyDirectiveController() {
// nothing here
}
You don't need to use $scope
because you already bind to controller instance this
. It means that scope config
scope: {
scenarios: '='
},
populates controller instance this
object, not $scope
object, and hence $scope.scenarios
is undefined
. With vm.scenarios = $scope.scenarios;
in controller you just overwrite correct binding with undefined value.
Demo: http://plnkr.co/edit/lYg15Xpb3CsbQGIb37ya?p=preview
这篇关于AngularJS 指令、ControllerAs、范围和 vm 属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!