我不能编译加载RequireJS AngularJS指令 [英] I cannot compile AngularJS directive loaded with RequireJS
本文介绍了我不能编译加载RequireJS AngularJS指令的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我按照这个线程步骤
<一个href=\"http://stackoverflow.com/questions/18774020/angularjs-directive-loaded-with-requirejs-not-compiling\">AngularJS指令装载RequireJS没有编译
但我还没有成功地编译我的code。我得到这个错误：
错误：[$喷油器：unpr]未知提供商：$ scopeProvider＆LT; - $范围＆LT; - radioButtonGroupDirective
这是我的文件：
main.js
require.config（{
的baseUrl：./app'，
路径：{
'角'：'../bower_components/angular/angular'，
角路线'：'../bower_components/angular-route/angular-route'，
角资源'：'../bower_components/angular-resource/angular-resource'，
角引导'：'../bower_components/angular-bootstrap/ui-bootstrap-tpls.min'，
角文字'：'../bower_components/textAngular/src/textAngular'，
角文本设置'：'../bower_components/textAngular/src/textAngularSetup'，
角文本的sanitize'：'../bower_components/textAngular/src/textAngular-sanitize'，
角文件上传'：'../bower_components/ng-file-upload/angular-file-upload.min'，
角文件上传-垫片'：'../bower_components/ng-file-upload/angular-file-upload-shim.min
}，
垫片：{
'角'：{'出口'：'角'}，
角路线：{DEPS：['角']}，
角资源：{DEPS：['角']}，
角自举：{DEPS：['角']}，
角文字：{DEPS：['角']}，
角文本设置：{DEPS：['角文字']}，
角文本的sanitize：{DEPS：['角文字']}，
角文件上传：{DEPS：['角文字']}，
角文件上传-垫片：{DEPS：['角文字']}
}
}）;要求（[
'角'，
路/路线'，
角引导，
角文字'，
角文本设置，
角文本的sanitize'，
角文件上传'，
角文件上传-垫片，
指令/指令
]
功能（角）{
返回angular.bootstrap（文件，[应用]）;
}）;
模块/ app.js
定义（['角'，'角路线，角资源，角引导，角文字'，'角文件上传 ]，功能（角）
{
返回angular.module（'应用'，['ngRoute'，'ngResource'，'ui.bootstrap'，'textAngular'，'angularFileUpload']）;
}）;
路线/ routes.js
定义（['模块/应用程序，控制器/ homeCtrl'，'../controllers/productsCtrl'，函数（APP）
{
返回的app.config（['$ routeProvider'，函数（$ routeProvider）
{
$ routeProvider.when（/，{
控制器：'homeCtrl'，
templateUrl：./app/partials/home.html
}）。当（'/产品列表，{
控制器：'productsListCtrl'，
templateUrl：./app/partials/products.html
}）;
}]）;
}）;
指令/ directives.js
定义（['模块/应用程序']，功能（应用程序）{
app.directive（'的RadioButtonGroup'，['$范围'，函数（$范围）{
返回{
限制：'E'，
适用范围：{模式：'='，选择：=，ID：'='，名称：=，后缀：'='}，
控制器：函数（$范围）{
$ scope.activate =功能（选件，$事件）{
$ scope.model =选项[$ scope.id];
//停止点击事件，以避免引导切换活动类
如果（$ event.stopPropagation）{
$ event.stopPropagation（）;
}
如果（$事件。preventDefault）{
。$事件preventDefault（）;
}
$ event.cancelBubble = TRUE;
$ event.returnValue =虚假的;
}; $ scope.isActive =功能（选件）{
返回选项[$ scope.id] == $ scope.model;
}; $ scope.getName =功能（选件）{
返回选项[$ scope.name];
}
}，
模板：＆LT;按钮式='按钮'类='BTN BTN - {{后缀}}'+
NG-CLASS ='{活跃：isActive（可选）}'+
NG重复='选项中选择'+
NG点击='激活（选项，$事件），'＆GT; {{的getName（选项）}}+
＆LT; /按钮＆gt;中
};
}]）;
}）;
控制器/ productsCtrl.js
定义（['模块/应用程序'，'../factories/cmsFactory'，'../factories/api']，功能（应用程序）
{
app.controller（'productsListCtrl'，['$范围，UnidadNeg，API，函数（$范围，UnidadNeg，API）
{
$ scope.myOptions = [{键：A，PRIO：关键}，{关键：B，PRIO：高}，{键：C，PRIO：中}，{键：D，PRIO：低}];
$ scope.myModel =C;
$ scope.idProperty =钥匙;
$ scope.nameProperty =PRIO;
$ scope.bootstrapSuffix =信息;
}]）;
}）;
的谐音/ products.html文件
＆LT; DIV CLASS =COL-SM-12 RadioGroup中＆GT;
当前的模型：{{基于myModel}}
＆LT; BR /＆GT;＆LT; BR /＆GT;
＆lt;无线按钮组级=BTN-组数据切换=按钮无线电模式=基于myModel选项=myOptionsID =idPropertyNAME =nameProperty后缀=bootstrapSuffix＆GT; ＆LT; /无线电按钮组＆gt;
＆LT; / DIV＆GT;
解决方案
您不应该注入$范围指令。当指令的控制器功能的角度范围$，$元素调用$ ATTRS和$控制器PARAMS默认情况下，传递给它。
指令控制器旁签名：
控制器：功能（$范围，$元，$ ATTRS，$ CTRL）{}
所以，在这里得到摆脱$范围注射和明年离开：
app.directive（'的RadioButtonGroup'，函数（）{...}
I have followed this thread steps
AngularJS directive loaded with RequireJS not compiling
but I have not yet managed to compile my code. I'm getting this error:
Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- radioButtonGroupDirective
These are my files:
main.js
require.config({
baseUrl: './app',
paths: {
'angular': '../bower_components/angular/angular',
'angular-route': '../bower_components/angular-route/angular-route',
'angular-resource': '../bower_components/angular-resource/angular-resource',
'angular-bootstrap': '../bower_components/angular-bootstrap/ui-bootstrap-tpls.min',
'angular-text': '../bower_components/textAngular/src/textAngular',
'angular-text-setup': '../bower_components/textAngular/src/textAngularSetup',
'angular-text-sanitize': '../bower_components/textAngular/src/textAngular-sanitize',
'angular-file-upload': '../bower_components/ng-file-upload/angular-file-upload.min',
'angular-file-upload-shim': '../bower_components/ng-file-upload/angular-file-upload-shim.min'
},
shim: {
'angular': {'exports': 'angular'},
'angular-route': { deps: ['angular']},
'angular-resource': { deps: ['angular']},
'angular-bootstrap': { deps: ['angular']},
'angular-text': { deps: ['angular']},
'angular-text-setup': { deps: ['angular-text']},
'angular-text-sanitize': { deps: ['angular-text']},
'angular-file-upload': { deps: ['angular-text']},
'angular-file-upload-shim': { deps: ['angular-text']}
}
});
require([
'angular',
'routes/routes',
'angular-bootstrap',
'angular-text',
'angular-text-setup',
'angular-text-sanitize',
'angular-file-upload',
'angular-file-upload-shim',
'directives/directives'
],
function(angular){
return angular.bootstrap(document, ["app"]);
});
modules/app.js
define(['angular', 'angular-route', 'angular-resource', 'angular-bootstrap','angular-text' , 'angular-file-upload'], function (angular)
{
return angular.module('app', ['ngRoute', 'ngResource', 'ui.bootstrap', 'textAngular', 'angularFileUpload']);
});
routes/routes.js
define(['modules/app', 'controllers/homeCtrl', '../controllers/productsCtrl', function(app)
{
return app.config(['$routeProvider',function($routeProvider)
{
$routeProvider.when("/", {
controller: 'homeCtrl',
templateUrl: './app/partials/home.html'
}).when('/productlist', {
controller: 'productsListCtrl',
templateUrl: './app/partials/products.html'
});
}]);
});
directives/directives.js
define(['modules/app'], function(app){
app.directive('radioButtonGroup', ['$scope', function($scope){
return {
restrict: 'E',
scope: { model: '=', options: '=', id: '=', name: '=', suffix: '=' },
controller: function($scope) {
$scope.activate = function (option, $event) {
$scope.model = option[$scope.id];
// stop the click event to avoid that Bootstrap toggles the "active" class
if ($event.stopPropagation) {
$event.stopPropagation();
}
if ($event.preventDefault) {
$event.preventDefault();
}
$event.cancelBubble = true;
$event.returnValue = false;
};
$scope.isActive = function(option) {
return option[$scope.id] == $scope.model;
};
$scope.getName = function (option) {
return option[$scope.name];
}
},
template: "<button type='button' class='btn btn-{{suffix}}' " +
"ng-class='{active: isActive(option)}'" +
"ng-repeat='option in options' " +
"ng-click='activate(option, $event)'>{{getName(option)}} " +
"</button>"
};
}]);
});
controllers/productsCtrl.js
define(['modules/app', '../factories/cmsFactory', '../factories/api'], function(app)
{
app.controller('productsListCtrl', ['$scope', 'UnidadNeg', 'api', function($scope, UnidadNeg, api)
{
$scope.myOptions = [{ key: "A", prio: "Critical" }, { key: "B", prio: "High" }, { key: "C", prio: "Medium" }, { key: "D", prio: "Low" }];
$scope.myModel = "C";
$scope.idProperty = "key";
$scope.nameProperty = "prio";
$scope.bootstrapSuffix = "info";
}]);
});
partials/products.html
<div class="col-sm-12 radiogroup">
Current model: {{myModel}}
<br /><br />
<radio-button-group class="btn-group" data-toggle="buttons-radio" model="myModel" options="myOptions" id="idProperty" name="nameProperty" suffix="bootstrapSuffix"></radio-button-group>
</div>
解决方案
You should not inject $scope to directive. When directive's controller function is called by angular $scope, $element, $attrs and $controller params are passed to it by default. Directive controller has next signature:
controller: function ($scope, $element, $attrs, $ctrl) {}
So get rid of $scope injection here and leave next:
app.directive('radioButtonGroup', function(){ ... }
这篇关于我不能编译加载RequireJS AngularJS指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
