如何在angularjs指令中要求控制器
谁能告诉我如何将一个指令中的控制器包含在另一个angularJS指令中。例如，我有以下代码
var app = angular.module('shop', []).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: '/js/partials/home.html'
})
.when('/products', {
controller: 'ProductsController',
templateUrl: '/js/partials/products.html'
})
.when('/products/:productId', {
controller: 'ProductController',
templateUrl: '/js/partials/product.html'
});
}]);
app.directive('mainCtrl', function () {
return {
controller: function ($scope) {}
};
});
app.directive('addProduct', function () {
return {
restrict: 'C',
require: '^mainCtrl',
link: function (scope, lElement, attrs, mainCtrl) {
//console.log(cartController);
}
};
});根据所有帐户，我应该能够访问addProduct指令中的控制器，但我不能。有没有更好的方法来做这件事？
回答 2
Stack Overflow用户
发布于 2013-03-29 04:49:24
我很幸运，在对这个问题的评论中回答了这个问题，但为了完整起见，我发布了一个完整的答案，所以我们可以将这个问题标记为“已回答”。
这取决于您希望通过共享控制器来实现什么；您可以共享同一控制器(尽管具有不同的实例)，也可以共享同一控制器实例。
共享控制器
两个指令可以通过将相同的方法传递给两个指令来使用相同的控制器，如下所示：
app.controller( 'MyCtrl', function ( $scope ) {
// do stuff...
});
app.directive( 'directiveOne', function () {
return {
controller: 'MyCtrl'
};
});
app.directive( 'directiveTwo', function () {
return {
controller: 'MyCtrl'
};
});每个指令都将拥有自己的控制器实例，但这允许您在任意多个组件之间共享逻辑。
需要控制器
如果您希望共享控制器的同一实例，则可以使用require。
require确保存在另一个指令，然后将其控制器作为参数包含到链接函数中。因此，如果在一个元素上有两个指令，那么您的指令可以要求存在另一个指令，并获得对其控制器方法的访问权限。这方面的一个常见用例是需要ngModel。
通过添加插入符号，^require除了检查当前元素之外，还会检查指令上的元素，以尝试找到另一个指令。这允许您创建复杂的组件，其中“子组件”可以通过其控制器与父组件进行通信，从而达到很好的效果。示例可以包括选项卡，其中每个窗格可以与整个选项卡进行通信以处理切换；折叠式设置可以确保一次只打开一个选项卡；等等。
在这两种情况下，您都必须同时使用这两个指令才能正常工作。require是组件之间进行通信的一种方式。
有关更多信息，请查看指令的指南页面：http://docs.angularjs.org/guide/directive
Stack Overflow用户
发布于 2013-04-21 04:39:56
Mark Rajcok给出了一个很好的stackoverflow答案：
有一个指向这个非常清晰的jsFiddle的链接：http://jsfiddle.net/mrajcok/StXFK/
<div ng-controller="MyCtrl">
<div screen>
<div component>
<div widget>
<button ng-click="widgetIt()">Woo Hoo</button>
</div>
</div>
</div>
</div>JavaScript
var myApp = angular.module('myApp',[])
.directive('screen', function() {
return {
scope: true,
controller: function() {
this.doSomethingScreeny = function() {
alert("screeny!");
}
}
}
})
.directive('component', function() {
return {
scope: true,
require: '^screen',
controller: function($scope) {
this.componentFunction = function() {
$scope.screenCtrl.doSomethingScreeny();
}
},
link: function(scope, element, attrs, screenCtrl) {
scope.screenCtrl = screenCtrl
}
}
})
.directive('widget', function() {
return {
scope: true,
require: "^component",
link: function(scope, element, attrs, componentCtrl) {
scope.widgetIt = function() {
componentCtrl.componentFunction();
};
}
}
})
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.name = 'Superhero';
}https://stackoverflow.com/questions/15672709
复制相似问题
腾讯云开发者
