我有一个AngularAMD应用程序,我有一个指令(在RequireJS意义上)依赖于该应用程序(它是该指令"生活"的Angular模块).
如果我使用路由,并在路由视图中使用该指令,那么有一个包含controllerUrl的路由,它取决于包含该指令的文件.
如果我不这样做,那么......
嗯,这是令人沮丧的循环.如果我告诉应用程序它依赖于指令,我会得到循环依赖.如果我不这样做,Angular不知道该指令,并且标签被忽略.
没有从AngularAMD再现整个控制器解析机制,我有没有办法做到这一点？
我有一个使用AngularAMD/RequireJS/Karma/Jasmine的项目,我的基本配置全部工作,大多数单元测试运行并成功通过.
我无法使用angular.mock.module或angularAMD.value()正确注入模拟服务.
我有:
// service definition in services/MyService.js
define(['app'],
function(app) {
app.factory('myService', [ '$document', function($document) {
function add(html) {
$document.find('body').append(html);
}
return { add: add };
}]);
}
);
// test
define(['angularAMD', 'angular-mocks', 'app', 'services/MyService'],
function(aamd, mocks, app) {
describe('MyService', function() {
var myBodyMock = {
append: function() {}
};
var myDocumentMock = {
find: function(sel) {
// this never gets called
console.log('selector: ' + sel);
return myBodyMock;
}
};
var svc;
beforeEach(function() {
// try standard way to mock …我正在尝试在我的应用程序中编写一个通用路由,并根据路径参数动态解析视图和控制器名称.
我有以下代码:
$stateProvider.state('default', angularAMD.route({
url: '/:module/:action?id',
templateUrl: function (params) {
var module = params.module;
var action = module + params.action.charAt(0).toUpperCase()
+ params.action.substr(1);
return 'app/views/' + module + '/' + action + 'View.html';
},
controller: 'userController',
}));
但是,我无法找到一种动态解析控制器名称的方法.我尝试使用这里resolve描述的,但ui-router似乎处理不同于angular-route的解决方案.
有什么指针吗？
编辑:我已经尝试过使用controllerProvider但它对我不起作用(例如,下面的代码只返回一个硬编码的控制器名称来测试它是否真的有效):
controllerProvider: function () {
return 'userController';
}
给我以下错误:
错误:[ng:areq]参数'userController'不是函数,未定义
http://errors.angularjs.org/1.3.3/ng/areq?p0=userController&p1=not%20aNaNunction%2C%20got%20undefined
我正在使用angularJS和requirejs通过angularAMD将复杂的应用程序连接在一起.
我的一个州有两个简单的观点,如下:
$stateProvider
.state("common", {
url: "/",
views: {
"view1": {
templateUrl: "view1.tpl.html"
},
"view2": {
templateUrl: "view2.tpl.html"
}
}
});
HTML
<div ui-view="view1"></div>
<div ui-view="view2"></div>
View1 有一个指令:
.directive('checkViewOneBoxWidth', function ($timeout) {
return {
restrict: 'A',
link: function (scope, elem, attrs) {
var linkFunctionAfterDomComplete = function () {
console.log(elem[0].scrollWidth);
}
$timeout(linkFunctionAfterDomComplete, 0);
}
}
})
而view2有一些适用于造型的页面,包括更改样式表height和width该的view1容器.
我希望函数在样式表修改DOM 之后linkFunctionAfterDomComplete计算元素height和width属性,所以我将函数包装在一个.view2linkFunctionAfterDomComplete …
创建了一个非常基本的原型AngularJS项目后,我想将其迁移到使用RequireJS来加载模块.我根据AngularAMD和AngularAMD示例项目修改了我的应用程序.
现在,当我访问我的默认路线时,我得到:
Uncaught TypeError: Cannot read property 'directive' of undefined
我一直在摸索为什么对'app'的依赖不满足.如果有人能够发现我明显做错了什么,那就非常感激了.
我把我项目的源代码放在GitHub上,但这里是关键部分:
main.js
require.config({
baseUrl: "js/",
// alias libraries paths
paths: {
'angular': '../bower_components/angular/angular',
'angular-route': '../bower_components/angular-route/angular-route',
'angular-resource': '../bower_components/angular-resource/angular-resource',
'angularAMD': '../bower_components/angularAMD/angularAMD',
'ngload': '../bower_components/angularAMD/ngload',
'jquery': '../bower_components/jquery/jquery'
},
// Add angular modules that does not support AMD out of the box, put it in a shim
shim: {
'angularAMD': ['angular'],
'ngload': [ 'angularAMD' ],
'angular-route': ['angular'],
'angular-resource': ['angular']
},
// kick start application
deps: ['app']
});
app.js …
尝试使用requirejs实现延迟加载.当我不使用图表时,一切都很好.但是,当我想使用图表(角度图表),而不是成功!使用带有角度图表的chart.js.
这是main.js:
require.config({
baseUrl: "http://localhost/ums/angular/js",
paths: {
'angular': 'lib/angular.min',
'ngRoute': 'lib/angular-route.min',
'flash': 'lib/angular-flash',
'angular-loading-bar': 'lib/loading-bar.min',
'ngAnimate': 'lib/angular-animate.min',
'ui.bootstrap': 'lib/ui-bootstrap-tpls-0.12.0',
'uniqueField': 'admin/directives/angular-unique',
'input_match': 'admin/directives/angular-input-match',
'uniqueEdit': 'admin/directives/angular-unique-edit',
'angularAMD': 'lib/angularAMD.min',
'chart.js': 'lib/Chart.min',
'angular-chart':'lib/angular-chart.min',
'app': 'admin/app',
},
waitSeconds: 0,
shim: {
'angular': { exports: 'angular'},
'angularAMD': { deps: ['angular']},
'angular-chart': { deps: ['angular','chart.js']},
'ngRoute':{ deps: ['angular']},
'angular-loading-bar':{ deps:['angular'] },
'ngAnimate': { deps:['angular'] } ,
'ui.bootstrap': {deps: ['angular'] },
'uniqueField': {deps: ['angular'] },
'input_match': {deps: ['angular'] },
'uniqueEdit': …