如何基于条件实例化ng-controller
如何基于条件实例化ng-controller
提问于 2015-12-22 03:45:21
我问了这个问题，但我问的具体问题已经发生了巨大的变化。
我有一段代码：
<div ng-attr-controller="{{pings || 'PingsCtrl as pings' }}">
<h1 ng-click="pings.press()">asdf</h1>
</div>该代码被注入到两个html页面中。已经有一个页面调用了PingsCtrl。我真的想让这段代码保持干爽，我只想对上面的代码有一个引用。
如果PingsCtrl还没有实例化，我如何编写上面的代码来生成ng-controller。
这是两个html页面。
HTML
// First page
<html ng-app="coolApp">
<div ng-controller="PingsCtrl as pings">
<div ng-attr-controller="{{pings || 'PingsCtrl as pings' }}">
<h1 ng-click="pings.press()">asdf</h1>
</div>
</div>
</html>
// Second page
<html ng-app="coolApp">
<div ng-attr-controller="{{pings || 'PingsCtrl as pings' }}">
<h1 ng-click="pings.press()">asdf</h1>
</div>
</html>Javascript在这里：
angular.module('coolApp', [])
.controller('PingsCtrl', function() {
var vm = this;
vm.press = function() {alert(123)};
})哪里出了问题，我该如何修复？
回答 3
Stack Overflow用户
发布于 2015-12-31 04:07:58
只需使用服务即可。它实际上是用于在页面之间拥有公共数据和功能的预期结构。
您尝试的部分问题是，无论您是否设法保留控制器，Angular都有自己的管理，它不会跟随您的管理，并且将在没有您的情况下刷新组件。你会遇到像$scope这样的东西，它实际上与你正在查看的页面不匹配，最终导致的问题比它的价值更多。
Stack Overflow用户
发布于 2016-01-02 21:40:07
我确实有一个解决方案，但我也回应了其他人对这种方法的担忧。您可能希望有一个全局控制器，您可以将其放在主体上，用于在任何地方和大多数其他控制器中发生的事情，并通过该控制器进行调用。例如
<body ng-controller="GlobalCtrl as gc">
<h1 ng-click="gc.pingPress()"></h1>
</body>不管怎样，这是我想出来的。
<div ng-if="pings">
<h1 ng-click="pings.press()">asdf</h1>
</div>
<div ng-if="!pings">
<div ng-controller="PingsCtrl as pings">
<h1 ng-click="pings.press()">asdf</h1>
</div>
</div>如果它被放在现有PingsCtrl的内部或外部，这将会起作用。
这是一个柱塞。
Stack Overflow用户
发布于 2016-01-03 16:18:26
请查看我的解决方案，了解如何在控制器之间共享数据
var app = angular.module('myApp', []);
app.controller("aCtrl", function ($scope, PingList) {
$scope.addPing = function() {
PingList.add('Ping A');
};
});
app.controller("bCtrl", function ($scope, PingList) {
$scope.addPing = function() {
PingList.add('Ping B');
};
});
app.factory('PingList', function () {
var pings = ['Ping1', 'Ping2'];
return {
add: function(ping) {
pings.push(ping);
},
get: function () {
return pings;
}
};
});
app.directive('pingList', function(PingList) {
return {
restrict: 'EA',
link: function($scope) {
$scope.pings = PingList.get();
$scope.press = function(ping) {
alert(ping);
}
},
template: '<ul><li ng-repeat="ping in pings" ng-click="press(ping)">{{ping}}</li></ul>'
};
});a, li {
cursor: pointer;
}
a {
color: blue;
text-decoration: underline;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="aCtrl" style="float: left">
<a ng-click="addPing()">click to add A ping</a>
<ping-list></ping-list>
</div>
<div ng-controller="bCtrl" style="float: right">
<a ng-click="addPing()">click to add B ping</a>
<ping-list></ping-list>
</div>
<div style="clear: both"></div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34403237
复制相关文章
相似问题