Question

我已遵循此主题步骤

AngularJS directive loaded with RequireJS not compiling

但我还没有设法编译我的代码。我收到此错误：

Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- radioButtonGroupDirective

这些是我的文件：

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"]);
});

模块/ 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.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.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>"
        };
    }]);
});

控制器/ 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";
    }]);
});

泛音/ 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>

Answer 1

你不应该将$ scope注入指令。当angular $ scope调用指令的控制器函数时，默认情况下会将$ element，$ attrs和$ controller params传递给它。指令控制器有下一个签名：

controller: function ($scope, $element, $attrs, $ctrl) {}

所以在这里摆脱$ scope注入并留下下一个：

app.directive('radioButtonGroup', function(){ ... }

我无法编译使用RequireJS加载的AngularJS指令

1 个答案: