Angularjs在延迟加载时请求Transclusion的多个指令
Angularjs在延迟加载时请求Transclusion的多个指令
提问于 2014-09-17 18:32:23
我正在尝试使用ui.router、ocLazyLoad、基础和角形基础建立一个简单的angularjs应用程序。
该应用程序是一个多视图应用程序，它的组件懒惰加载使用ocLazyLoad。设置视图和相关控制器没有问题。但是，当试图显示基金会警报时，我遇到了问题。当我试图查看我的警报(route1)时，我会得到空警报。下面的堆栈跟踪。
为什么角应用警报指令两次？在这里有一个柱塞：http://goo.gl/lhtD0c
Error: [$compile:multidir] Multiple directives [alert, alert] asking for transclusion on:
<div class="alert-box" ng-class="(type || "")" ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">
http://errors.angularjs.org/1.2.22/$compile/multidir?p0=alert&p1=alert&p2=t…lerts%22%20type%3D%22alert.type%22%20close%3D%22closeAlert(%24index)%22%3E
at https://code.angularjs.org/1.2.22/angular.js:78:12
at assertNoDuplicate (https://code.angularjs.org/1.2.22/angular.js:6933:15)
at applyDirectivesToNode (https://code.angularjs.org/1.2.22/angular.js:6353:13)
at https://code.angularjs.org/1.2.22/angular.js:6858:37
at https://code.angularjs.org/1.2.22/angular.js:8091:11
at wrappedCallback (https://code.angularjs.org/1.2.22/angular.js:11546:81)
at wrappedCallback (https://code.angularjs.org/1.2.22/angular.js:11546:81)
at https://code.angularjs.org/1.2.22/angular.js:11632:26
at Scope.$eval (https://code.angularjs.org/1.2.22/angular.js:12658:28)
at Scope.$digest (https://code.angularjs.org/1.2.22/angular.js:12470:31)我的索引正文如下：
<body>
<div>
<a class="button" ui-sref="route1">Route 1</a>
<a class="button" ui-sref="route2">Route 2</a>
</div>
<div ui-view></div>
</body>与此页面相关联的javascript是：
var myapp = angular.module('myapp', ['ui.router', 'oc.lazyLoad', 'mm.foundation'])
myapp.config(function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /route2
$urlRouterProvider.otherwise('/route2')
$stateProvider
.state('route1', {
url: "/route1",
controller: 'Route1',
templateUrl: "route1.html",
resolve: {
loadCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'myapp',
files: ['route1.js']
})
}]
}
})
.state('route2', {
url: "/route2",
templateUrl: "route2.html"
})
});
$(function() {
Foundation.global.namespace = '';
$(document).foundation();
})这些问题与route1有关。这是route1模板。
<div ng-controller="Route1">
Route 1 - {{ message }}
<br/>
<alert ng-repeat="alert in alerts"
type="alert.type"
close="closeAlert($index)">{{alert.msg}}</alert>
</div>最后是1.js-
angular.module('myapp').controller('Route1', ['$scope', function($scope) {
$scope.message = 'Hello, world!'
$scope.alerts = [
{ type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' },
{ type: 'success round', msg: 'Well done! You successfully read this important alert message.' }
];
}]);回答 3
Stack Overflow用户
回答已采纳
发布于 2014-09-23 14:51:03
问题在于它正在重新加载您的"myapp“模块依赖项。只需配置ocLazyLoad，就不会像这样重新加载基础：
$ocLazyLoadProvider.config({
loadedModules: ['mm.foundation']
});会是这样的：
var myapp = angular.module('myapp', ['ui.router', 'oc.lazyLoad', 'mm.foundation'])
myapp.config(function($stateProvider, $urlRouterProvider, $ocLazyLoadProvider){
// For any unmatched url, send to /route2
$urlRouterProvider.otherwise('/route2')
$ocLazyLoadProvider.config({
loadedModules: ['mm.foundation']
});
$stateProvider
.state('route1', {
url: "/route1",
controller: 'Route1',
templateUrl: "route1.html",
resolve: {
loadCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'myapp',
files: ['route1.js']
})
}]
}
})
.state('route2', {
url: "/route2",
templateUrl: "route2.html"
})
});
$(function() {
Foundation.global.namespace = '';
$(document).foundation();
})Stack Overflow用户
发布于 2014-09-17 19:10:49
替换此代码
<alert ng-repeat="alert in alerts"
type="alert.type"
close="closeAlert($index)">{{alert.msg}}</alert>通过
<div ng-repeat="alert in alerts">
<alert type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert>
</div>Stack Overflow用户
发布于 2014-09-18 13:03:27
我终于成功了。问题是ocLazyLoad正在重新加载“myapp”模块。这导致依赖项重新加载。其中一个依赖项是mm.foundation，它重新处理所有的指令，创建每对的克隆。
为了防止这种情况，我没有将第二个控制器绑定到我的应用程序上。相反，我创建了一个新的应用程序“route1app”。您可以在这里看到更新的柱塞：http://goo.gl/lhtD0c
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25897874
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号