【发布时间】：2017-01-10 12:59:20
【问题描述】：
In this punk 我正在尝试使用带有transclude: true 和RequireJS 的Angular 指令。嵌入的元素应包含在用户单击按钮时打开的 Angular UI 模态中。
代码使用ui.router显示视图，其中一个有一个打开模态的按钮。
This is a working example没有使用RequireJS，你可以在Angular UI modal中看到被嵌入的元素。
使用 RequireJS 时，我在控制台中收到以下错误：
未知提供者：$templateRequestProvider
缺少什么？
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);
};
}
}
});
});
【问题讨论】：
标签： angularjs angularjs-directive angular-ui-router requirejs angular-ui