AngularJS 中的 controllerAs Controller 在 AngularJS 应用中可以说是无处不在， 可以在 html 中通过 ngController 指令来指定 Controller...但是， 有一个细节可能很多人没有注意到， 那就是 controllerAs ， 上面的三种用法还可以分别这样使用： <ANY ng-controller="expression as myExpr...: 'ctrl' }) 那么， 使用了 <em>controllerAs</em> 有什么区别呢？...将直接绑定 Controller 的属性和方法， 而不使用 <em>controllerAs</em> 将绑定到为 Controller 注入的 $scope 参数， 下面用一个具体的例子来说明一下： 不使用 <em>controllerAs</em>...上面的例子在使用 <em>controllerAs</em> 时， 可以修改成这样： angular .module('app', []).
scope 上的 function myCtrl($scope){ $scope.a = ‘aaa’; $scope.foo = function(){ … } } 使用 controllerAs...if (directive.controllerAs) { locals....$scope[directive.controllerAs] = controllerInstance; } 但是这样做，除了上面提到的使 controller 更加 POJO 外，还可以避免遇到...因为使用 controllerAs 的话 view 上所有字段都绑定在一个引用的属性上，比如 vm.xx，所以坑不再存在）。...{ {name}} 问题 使用 controllerAs
说明StatisticController控制器没有起到该起的作用，话句话说，就是StatisticController失效，所以需要注册到boot.js以激活使用 （2）controlleras参数的使用... 如果你有读过Angello的代码，你就会发现，在angello的很多模块如users、storyboard等当中都是用了参数controllerAs 实验了上面步骤后发现页面是能够正常显示了，...为了弄清楚这个controllerAs参数的使用，将这里的controllerAs:'usesrs'改为了controllerAs:'users123' 同时将statistic.html对应的users...设定的参数值一定要与页面中的变量同名，否则controllerAs参数失效。...另外声明一点，通过使用controllerAs这个参数，避免了$scope的使用，使得在StatisticController.js中大幅减少了$scope的出现，简化了代码。
/components/home/home.tpl.html', 9 controller: 'HomeController', 10 controllerAs.../components/about/about.tpl.html', 15 controller: 'AboutController', 16 controllerAs...components/contact/contact.tpl.html', 20 controller: 'ContactController', 21 controllerAs...components/home/home.tpl.html', 16 controller: 'HomeController', 17 controllerAs...components/about/about.tpl.html', 25 controller: 'AboutController', 26 controllerAs
url, { template: string, templateUrl: string, controller: string, function 或 array, controllerAs...controllerAs: string类型，为controller指定别名。 redirectTo: 重定向的地址。 resolve: 指定当前controller所依赖的其他模块。 <!
skip&limit', templateUrl: 'partials/photos-detail-comment.html', controller: 'PhotoCommentController', controllerAs...url: '/detail/:id', templateUrl: 'partials/photos-detail.html', controller: 'PhotoDetailController', controllerAs...url:'/detail/:id', templateUrl: 'partials/photos-detail.html', controller: 'PhotoDetailController', controllerAs...skip&limit', templateUrl: 'partials/photos-detail-comment.html', controller: 'PhotoCommentController', controllerAs
hasElementTranscludeDirective) { $element.data('$' + directive.name + 'Controller', controllerInstance); } // 当配置controllerAs...时将实例绑定到scope上 if (directive.controllerAs) { locals....$scope[directive.controllerAs] = controllerInstance; } }); } 2) preLink 执行 // PRELINKING for(i
控制器嵌套Demo 5.何为ControllerAs AngularJS提供$scope方式来处理Controller。...如果有多个控制器并行，或者多个层级的嵌套，我们有时很难区分在视图上使用时哪个控制器下的属性，可以使用ControllerAs来避免这个问题。
transclude:Boolean, controller:String or function(scope,element,attrs,transclude,otherInjectables){}, controllerAs...与指令元素相关的当前的作用域 被注入到指令中 element 当前指令对应的元素 attrs 当前元素 属性 组成的对象 比如id class 等，是键值对的形式 transclude 嵌入连接函数 controllerAs
templateUrl:"/templates/detail.html", controller:"DetailController", controllerAs
: 'home', views:{ "body@content":{ templateUrl: 'partials/home.html', controller: 'HomeController', controllerAs...true, views:{ "body@content":{ templateUrl: 'partials/photos.html', controller: 'PhotoController', controllerAs...content.photos.list',{ url: '/list', templateUrl: 'partials/photos-list.html', controller: "PhotoListController", controllerAs...,{ url: '/detail', templateUrl: 'partials/photos-detail.html', controller: 'PhotoDetailController', controllerAs
statistic.html提供相应的功能和数据 更新了两个文件： Angello.js:为页面跳转添加接口 boot.js：注册新建的js文件，以便新建的js文件投入使用 同时遇到了一些坑比如： controllerAs...templateUrl: 'src/angello/statistic/tmpl/data.html', controller: 'DataCtrl', controllerAs
routeProvider.when(url, { template: string, templateUrl: string, controller: string, function 或 array, controllerAs
when的第二个参数： controller：对应路径的控制器函数，或者名称 controllerAs：给控制器起个别名 template：对应路径的页面模板，会出现在ng-view处,比如"
/app.html'), controller: function () { this.class = style; }, controllerAs: 'app'
controller: String or function(scope, element, attrs, transclude, otherInjectables) { ... }, controllerAs
transclude: true, restrict: 'E', scope: false, controller:'someController', controllerAs
controllerAs （字符串String） 用来设置控制器的别名，可以以此为名来发布控制器，并且作用域可以访问controllerAs。这样就可以在视图中引用控制器，甚至无需注入$scope。
在使用controller的时候，为控制器注入$window与$scope，这个时候controller中的属性与方法是属于$scope的，而使用controllerAS的时候，可以将controller...答案是肯定的，route提供了一个controllerAs参数。这样在模板里就可以直接使用别名home啦。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
云直播
对象存储
