将变量从指令传递给控制器(使用ControllerAs vm语法)
最近，我阅读了一堆AngularJS样式指南和最佳实践，并最终获得了使用此样板代码，用于创建一个带有recently和Browserify的项目。
上述样板使用了多种最佳实践，从文件夹结构到带浏览器的捆绑，到特定的angularJS指南。
我创建了一个简单的属性指令(我的第一个)，它将获得$window.width，它将根据窗口的宽度在作用域上设置一个特定的变量。原因是我有一个图像网格，我想有条件地限制显示图片的总数，这取决于屏幕的宽度。实际上，该值将在呈现所有图片的limitTo过滤器中使用。
例如，你可以在手机上得到6张图片的网格，平板电脑上的8张图片，桌面上的12张图片。
问题是控制器使用ControllerAs vm语法，因此我需要在其中注入$scope，根据前面提到的样式指南，这是一种不好的做法，只有在绝对必要时才能使用(例如发布和订阅事件)。
由于我对编写自己的指令和控制器作为vm语法都相当陌生，所以我不知道如何继续。如果不应该在控制器中注入作用域，那么如何访问来自指令的变量？
回答 2
Stack Overflow用户
发布于 2015-02-05 04:42:10
因此，基本上您希望避免在html中使用作用域和控制器。
我已经创建了plnkr示例-扩展您的代码。http://plnkr.co/edit/YOd3KlzTpVviLVuoEBfN?p=preview
在这个例子中，我展示了如何在控制器上定义一个函数，并从html调用它并在html中访问它的属性。这一切都是在不使用$scope的情况下完成的。
这里有一个完整的片段
html
<div break-limit>
<p>Title: {{ctrl.title}}</p>
<p>Number: {{ctrl.number}}</p>
Limit : {{ctrl.limit}}
<br>
<br>
<input ng-model="ctrl.name"/>
<button ng-click="ctrl.sayHello()">Say Hello</button>
</div>.js
(function() {
var app = angular.module('myApp', []);
function ExampleCtrl() {
var vm = this;
vm.title = 'AngularJS, using ControllerAs in Directive!';
vm.number = 1234;
vm.name = "CASE";
}
angular.extend(ExampleCtrl.prototype, {
sayHello: function() {
alert('Hello, ' + this.name);
}
});
function breakLimit($window) {
return {
controller: ExampleCtrl,
scope: true,
controllerAs: 'ctrl',
link: function(scope, element, attrs, ctrl) {
var width = $window.innerWidth;
if (width <= 640) {
ctrl.limit = 6;
}
if (641 <= width <= 1024) {
ctrl.limit = 8;
}
if (1025 <= width <= 1440) {
ctrl.limit = 12;
}
}
}
}
app.directive('breakLimit', breakLimit);
})();Stack Overflow用户
发布于 2015-02-05 15:43:17
我不知道你想在这里取得什么成就。在多个指令之间共享控制器并不是一个好主意，只要它们不相关。你应该为此使用服务。您可以参考下面的链接来了解如何建立此通信https://github.com/ynmanware/AngTest/tree/master/Angular-unrelated-controller-messaging
我给plnkr http://plnkr.co/edit/den1mfMeIAWezLTuVZVX?p=preview粘贴了一个精化的示例
html
<body>
<div ng-app="myApp">
<div ng-controller="Controller1 as ctrl">
<br>
<table>
<tr>
<td><B> Enter Description in Controller1</B></td>
<td><input type="text" ng-model="ctrl.description"></td>
</tr>
</table>
</div>
<div ng-controller="Controller2 as ctrl">
<table>
<tr>
<td><B> Description in controller2</B></td>
<td>{{ctrl.description}}</td>
</tr>
</table>
</div>
</div>
</body>.js
(function(app) {
function SharedService() {
var description = "Master";
}
angular.extend(SharedService.prototype, {
getDescription: function() {
return this.description;
},
setDescription: function(desc) {
this.description = desc;
}
});
function Controller1(SharedService) {
this.sharedService = SharedService;
}
Object.defineProperty(Controller1.prototype,
'description', {
enumerable: true, //indicate that it supports enumerations
configurable: false, //disable delete operation
get: function() {
return this.sharedService.getDescription();
},
set: function(val) {
this.sharedService.setDescription(val);
}
});
function Controller2(SharedService) {
this.sharedService = SharedService;
}
Object.defineProperty(Controller2.prototype,
'description', { //read only property
enumerable: true,
configurable: false,
get: function() {
return this.sharedService.getDescription();
}
});
app.service('SharedService', SharedService);
app.controller('Controller1', Controller1);
app.controller('Controller2', Controller2);
})(angular.module('myApp', []));https://stackoverflow.com/questions/28326872
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号