我將範圍值傳遞給我的指令，但它是未定義的

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

我添加了一個「$」行動範圍和它的好:) ，但我不明白爲什麼它現在的工作所以如果有人知道爲什麼，他會向我解釋。謝謝:)