Я передаю значения области моей директивы, но это не определено

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, вообще ничего.

шаблон директивы является начальной загрузки модальный, который содержит форму для добавления и редактирования модуля:

<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

Это вы что искали?

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

Попробуйте удалить кавычки из атрибутов области видимости в директиве 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 зарезервирован.

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

я добавить «$» в сферу, и это хорошо :) , но я не понимаю, почему это работа теперь поэтому, если кто-то знает, почему, он сможет объяснить это мне. спасибо :)