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

Question

我正在尝试使用ui.router ， ocLazyLoad ， Foundation和angular-foundation设置一个简单的angularjs应用程序。

该应用程序是一个多视图应用程序，其组件是使用ocLazyLoad延迟加载的。 我没有问题设置视图和关联的控制器。 但是，尝试显示基金会警报时出现问题。 当我尝试查看警报时（route1），我收到的警报是空的。 和下面的堆栈跟踪。

为什么Angular两次应用alert指令？ 可以在这里找到一个punker： 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.' }
    ];

}]);

Answer 1

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

Answer 2

替换此代码

<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>

Answer 3

我终于设法完成了这项工作。 问题在于ocLazyLoad正在重新加载“ myapp”模块。 这导致重新加载依赖项。 依赖项之一是mm.foundation，它重新处理所有指令以创建每对的克隆。

为了防止这种情况，我没有将第二个控制器绑定到myapp。 相反，我创建了一个新的应用程序“ route1app”。 您可以在此处查看更新的插件： http : //goo.gl/lhtD0c

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

问题描述

3 个解决方案

解决方案1
5 已采纳 2014-09-23 14:51:03

解决方案2
0 2014-09-17 19:10:49

解决方案3
0 2014-09-18 13:03:27

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

问题描述

3 个解决方案

解决方案1 5 已采纳 2014-09-23 14:51:03

解决方案2 0 2014-09-17 19:10:49

解决方案3 0 2014-09-18 13:03:27

解决方案1
5 已采纳 2014-09-23 14:51:03

解决方案2
0 2014-09-17 19:10:49

解决方案3
0 2014-09-18 13:03:27