Question

我有问题从我的控制器范围传入我的指令3参数。

参见指令：

angular.module('app.administration').directive('wcModuleForm', function()
{

    return {
        restrict: 'E',
        scope: {
            'module': '=',
            'applications': '=',
            'standards': '='
        },
        templateUrl: 'app/administration/directives/module/wc-module-form.tpl.html',
        link: function(scope, form)
        {

            form.bootstrapValidator({...});
        }
    };
});

在html中我称之为指令：

<wc-module-form
        module="moduleForm"
        applications="applications"
        standards="standards">
</wc-module-form>

3个值moduleForm，应用程序和标准都在我的范围控制器中。但是当我在指令的模板中测试时，所有值都是未定义的，我不明白为什么？

<h4>module : {{(module === undefined) ? 'undefined' : 'defined'}}</h4> -> **undefined**
<h4>applications : {{(applications === undefined) ? 'undefined' : 'defined'}}</h4> -> **undefined**
<h4>standard : {{(standards === undefined) ? 'undefined' : 'defined'}}</h4> -> **undefined**

当我使用console.log在指令的link函数中放置'module'时，什么都没有。

该指令的模板是一个bootstrap模式，它包含一个用于添加或编辑模块的表单：

<div class="modal fade" id="moduleFormModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">{{ (module.id !== undefined) ? "Ajout d'un module" : "Edition d'un module" }}</h4>
                <h4>module : {{(module === undefined) ? 'undefined' : 'defined'}}</h4>
                <h4>applications : {{(applications === undefined) ? 'undefined' : 'defined'}}</h4>
                <h4>standard : {{(standards === undefined) ? 'undefined' : 'defined'}}</h4>
            </div>
            <div class="modal-body">
                <form id="movieForm" method="post" class="ng-pristine ng-valid bv-form" novalidate="novalidate">
                    <button type="submit" class="bv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>

                    <div class="form-group">
                        <label class="control-label">Nom</label>
                        <input type="text" class="form-control" name="name" ng-model="module.name">
                    </div>
                    <div class="form-group">
                        <label class="control-label">Pictogramme</label>
                        <input type="text" class="form-control" name="picto" ng-model="module.picto">

                    </div>
                    <div class="form-group">
                        <label class="control-label">Couleur</label>
                        <input type="text" smart-colorpicker class="form-control" name="color" ng-model="module.color">
                    </div>

                    <div class="form-group">
                        <div class="selectContainer">
                            <label class="control-label">Application</label>
                            <select class="form-control" name="application" ng-model="module.application_id">
                                <option ng-repeat="application in applications" value="application.id">{{ application.name }}</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="selectContainer">
                            <label class="control-label">Standard</label>
                            <select class="form-control" name="standard" ng-model="module.standard_id">
                                <option ng-repeat="standard in standards" value="standard.id">{{ standard.name }}</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-actions">
                        <div class="row">
                            <div class="col-md-12">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary"><i class="fa fa-save"></i> Sauvegarder</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

和控制器：

'use strict';

angular.module('app.administration')
  .controller('AdministrationCtrl', ['$scope', '$rootScope', '$http', 'APP_CONFIG', function($scope, $rootScope, $http, APP_CONFIG)
  {

      /**
       * différentes applications existantes
       * @type [{object}]
       */
      $scope.applications = [];

      /**
       * différentes standards existantes
       * @type [{object}]
       */
      $scope.standards = [];

      /**
       * module pour le formulaire
       * @type {{}}
       */
      $scope.moduleForm = {id: 5,
          name: 'Fonction',
          standard_id: 2,
          application_id: 1,
          picto: 'fa fa-gears',
          color: '#F20E0E'};
  }]);

所以，如果你有一个想法，请提前谢谢。

Answer 1

我找到解决方案很好：

参见指令：

angular.module('app.administration').directive('wcModuleForm', function()
{

    return {
        restrict: 'E',
        scope: {
            module: '=',
            applications: '=',
            standards: '='
        },
        templateUrl: 'app/administration/directives/module/wc-module-form.tpl.html',
        link: function($scope, form)
        {
            form.bootstrapValidator({...});
        }
    };
});

我在范围内添加'$'，这很好:) 但我不明白为什么现在这样做，所以如果有人知道为什么，他会向我解释。谢谢:)）

Answer 2

这是你在找什么？

(function () {
    'use strict';

    angular
            .module('app.administration')
            .directive('wcModuleForm', wcModuleForm);

    wcModuleForm.$inject = [];

    function wcModuleForm() {

        return {
            restrict: 'E',
            scope: {
                module: '=',
                applications: '=',
                standards: '='
            },
            controller: function ($scope) {

                form.bootstrapValidator({
                    module: $scope.module,
                    applications: $scope.applications,
                    standards: $scope.standards
                });
            },
            template: '<div>{{ module }}{{ applications }}{{ standards }}</div>'
        }
    }

}());

Answer 3

尝试从wcModuleForm指令中删除范围属性中的引号。

像这样：

return {
    restrict: 'E',
    scope: {
        module: '=',
        applications: '=',
        standards: '='
    },
    templateUrl: 'app/administration/directives/module/wc-module-form.tpl.html',
    link: function(scope, form)
    {

        form.bootstrapValidator({...});
    }
};

如果它不起作用，则module可能是预定义属性。尝试使用其他名称。像<directive data-application="..."></directive>一样无效，因为保留了data。

我将范围值传递给我的指令，但它未定义

3 个答案: