将角度指令范围传递给指令控制器
我目前正在学习在AngularJs中使用指令,尽管我知道Angular 2.0仍然只是在alpha中,但我已经开始阅读关于web的“为角2.0准备”文章。将角度指令范围传递给指令控制器
其中有相当一部分提到了离开链接函数,并使用控制器和bindToController只是为了使指令更像Angular 2.0的“组件”。
我遇到的问题是,我真的不知道该怎么我的指令范围传递给我使用该指令控制器...
例如,给出以下指令时:
(function() {
'use strict';
angular.module('app').directive('gidsImagePreview', imagePreview);
/* @ngInject */
function imagePreview() {
var directive = {
restrict: 'EA',
templateUrl: 'scripts/directives/gidsImagePreview.directive.html',
scope : {
images : '='
},
controller: ImagePreviewController,
controllerAs: 'vm',
bindToController: true
};
return directive;
}
/* @ngInject */
function ImagePreviewController(){
var self = this;
self.featured = self.images[0];
self.preview = preview;
function preview(img){
self.featured = img;
}
}
})();
而下面的html“呼”的指令(vm.project.images是图像对象的数组与文件名属性):
<gids-image-preview images="vm.project.images"></gids-image-preview>
那么,是什么让我的“ SE ImagePreviewController中的“lf.images”总是未定义的?
阅读this article,他/她似乎是在做我在做什么(只是不能与数组对象)...
事实证明,我在做的事情没有什么是错的。这是一个计时问题。
我想在我的指令控制器中使用“图像”的那一刻,它仍然是未定义的,因为我的指令被绑定的主对象(project.images)尚未加载。
我已经在我的路由配置中加入了一个解析函数,以确保主对象在我的详细页面(包含指令)打开之前被加载。另外,为了补充说明,@camden_kid提到我不得不在我的控制器中使用var vm = this,因为我使用了controllerAs:“vm”选项;据我所知,这是不正确的,你在控制器函数中使用的内容与你在视图中引用该控制器属性无关。
所以,使用controllerAs:'vm'只意味着你将不得不使用“vm”。在视图中的符号。它与控制器功能中将使用的变量无关(如果这是错误的,请纠正我,但从目前为止所了解的情况来看,情况并非如此)。
您只需范围注入到控制器。如果您没有再压缩-ING你*社简单地把$scope
作为参数传递给ImagePreviewController
:
function ImagePreviewController($scope) {
...
}
此外,如果缩小-ING是很重要的附加:ImagePreviewController.$inject = ['$scope'];
控制器定义如下。
如果你想使用数组文本语法,声明这样说:
var ImagePreviewController = ['$scope', function ($scope) { ... }];
然后,您可以通过访问$scope.images
图像阵列。我更喜欢使用$inject
属性,只是作为风格问题。您想要使用的这个/自己的工作流程只有在您希望控制器本身公开其他指令使用的API时才有用。
以供将来参考,角文档具有指示和不同方式的一个非常完整的描述,你可以撰写他们:https://docs.angularjs.org/guide/directive
但是你可以使用[directiveElement] .getIsolatedScope()function.It的可用everywhere.Maybe此功能可以帮助您通过其他方式解决您的问题。
从我迄今为止所了解的情况来看,通过使用“bindToController”,变量可在控制器的“this”对象上使用,不需要$ scope。 – 2015-04-03 10:41:58