Angular 带有嵌入元素的指令 + RequireJS 不工作

Question

In this punk 我正在尝试使用 transclude: true 和 RequireJS 设置 Angular 指令。嵌入的元素应包含在用户单击按钮时打开的 Angular UI 模式中。

该代码使用 ui.router 来显示视图，其中一个视图有一个打开模式的按钮。

This is a working example 没有使用RequireJS，你可以在Angular UI模态中看到嵌入的元素。

使用 RequireJS 时，我在控制台中收到以下错误：

Unknown provider: $templateRequestProvider <- $templateRequest <- $uibModal <- modalDirective

缺少什么？

HTML

<ul class="menu">
  <li><a href ui-sref="view1">Some content</a></li>
  <li><a href ui-sref="view2">Some modal</a></li>
</ul>

<div ui-view></div>

<script data-main="config" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.9/require.min.js"></script>

config.js

require.config({
    paths: {
        'angular': 'https://code.angularjs.org/1.2.16/angular',
        'uiBootstrap' : 'https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.4.0/ui-bootstrap-tpls',
        'domReady': 'https://cdnjs.cloudflare.com/ajax/libs/require-domReady/2.0.1/domReady',
        "uiRouter": "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router"
    },
    shim: {
        'angular': {
            exports: 'angular'
        },
        'uiBootstrap': { 
          exports: 'uiBootstrap', 
          deps: ['angular'] 
        },
        'uiRouter':{
            deps: ['angular']
        }
    },

    deps: [
        'start'
    ]

});

start.js

define([
    'require',
    'angular',
    'app',
    'routes'
], function (require, angular) {
    'use strict';
    require(['domReady!'], function (document) {
        angular.bootstrap(document, ['app']);
    });
});

routes.js

define(['app','ctl'], function(app) {

    'use strict';
    return app.config(function($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise("/view1");

        $stateProvider.state('view1', {
              url: "/view1",
              templateUrl: "partial1.html"
            })
        .state('view2',{
            url: '/view2',
            templateUrl: 'partial2.html'
        });
    })
});

ctl.js

define(['app','modal'], function (app) {

  'use strict';
  app.controller('ctl', function($scope) {
    $scope.open = function () {
        $scope.modalCtl.openModal();
    };
  });   
});

modal.js

define(['app','uiBootstrap'], function (app) {

   'use strict';
   app.directive("modal", function($timeout,$uibModal) {
          return {
            restrict: "AE",        
            scope: {              
                control: '='
            },
            transclude: true,
            link: function (scope, element, attrs, ctrl, transclude) {

              scope.control = scope.control || {}

                scope.control.openModal = function () {

                    var instance = $uibModal.open({
                      windowClass: 'the-modal',
                      template: '<div class="content"></div>',
                      appendTo: element
                    });

                    $timeout(function (){
                        transclude(scope.$parent, function(clonedContent){
                          element.find('.content').append(clonedContent);  
                        })
                    },10);

                };

            }
          }
    });
});

Answer 1

您在损坏的 plunker 请求中使用的 ui-bootstrap 版本 (2.4.0)uires angular 1.3+ $templateRequest 服务。因此，它与 angular 1.2.

不兼容

在你的 plunker 中更新 Angular 的版本，它应该会开始工作。 http://plnkr.co/edit/OXBbmWS9yiAfnxsiNHsP?p=preview

Angular 带有嵌入元素的指令 + RequireJS 不工作

Angular directive with transcluded elements + RequireJS not working

requirejs

angularjs

angular-ui

angularjs-directive

angular-ui-router