我问了这个问题,但我问的具体问题已经发生了巨大的变化。
我有一段代码:
<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)};
})
哪里出了问题,我该如何修复?
发布于 2015-12-31 04:07:58
只需使用服务即可。它实际上是用于在页面之间拥有公共数据和功能的预期结构。
您尝试的部分问题是,无论您是否设法保留控制器,Angular都有自己的管理,它不会跟随您的管理,并且将在没有您的情况下刷新组件。你会遇到像$scope
这样的东西,它实际上与你正在查看的页面不匹配,最终导致的问题比它的价值更多。
发布于 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的内部或外部,这将会起作用。
这是一个柱塞。
发布于 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>
https://stackoverflow.com/questions/34403237
复制相似问题