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

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 个值在我的范围控制器中。 但是当我在指令的模板中测试时，所有的值都是未定义的，我不明白为什么？

<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 的指令的链接函数中监视“模块”时，什么都没有。

该指令的模板是一个引导模式，其中包含添加或编辑模块的表单：

<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 已保留。