gpt4 book ai didi

javascript - Angularjs 多个指令在延迟加载时要求包含

转载 作者:行者123 更新时间:2023-11-29 17:04:17 25 4
gpt4 key购买 nike

我正在尝试使用 ui.router 设置一个简单的 angularjs 应用程序, ocLazyLoad , Foundationangular-foundation .

该应用是一个多 View 应用,其组件使用 ocLazyLoad 延迟加载.我在设置 View 和相关 Controller 时没有问题。但是,我在尝试显示基金会警报时遇到了问题。当我尝试查看我的警报 (route1) 时,我得到空警报。以及下面的堆栈跟踪。

为什么 Angular 两次应用 alert 指令?这里有一个 plunker:http://goo.gl/lhtD0c

Error: [$compile:multidir] Multiple directives [alert, alert] asking for transclusion on:        
<div class="alert-box" ng-class="(type || &quot;&quot;)" 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>

最后是 route1.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.' }
];

}]);

最佳答案

问题是它正在重新加载您的“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();
})

关于javascript - Angularjs 多个指令在延迟加载时要求包含,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25897874/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com