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

Question

我在将 Controller 范围内的 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、应用程序和标准位于我的范围 Controller 中。但是当我在指令模板中测试时，所有值都未定义，我不明白为什么？

<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 -->

和 Controller :

'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({...});
        }
    };
});

我在范围中添加了一个“$”，这很好:)但我不明白为什么它现在起作用，所以如果有人知道为什么，他会向我解释。谢谢:)