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

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'};
  }]);

Так что, если у вас есть идея, заранее спасибо.

javascript angularjs angularjs-directive

1

Thibaud Ledeux 19 Янв 2016 в 17:21

1

Можете ли вы предоставить более обширную скрипку?

–

Slytherin

19 Янв 2016 в 17:24

Попробуйте это:

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

–

Alon Eitan

19 Янв 2016 в 17:27

Как определяются moduleForm, приложения и стандарты? Они заполняются асинхронно?

–

Prashant

19 Янв 2016 в 17:57

Я пытаюсь использовать ng-if и ng-if return false, я пытаюсь использовать только modulForm, и результат тот же

–

Thibaud Ledeux

19 Янв 2016 в 18:03

Я задаю вопрос о контроллере

–

Thibaud Ledeux

19 Янв 2016 в 18:05

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

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

1

Thibaud Ledeux 19 Янв 2016 в 19:09

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

}());

0

ssuperczynski 19 Янв 2016 в 17:51

Form.bootstrapValidator предназначен для проверки данных в форме. если я поставил "...", это потому, что я хотел просто уменьшить текст ^^, но почему вы помещаете comportement в директиву в контроллер, а не в функцию ссылки?

–

Thibaud Ledeux

19 Янв 2016 в 18:34

Функция каждой директивы controller вызывается всякий раз, когда создается новый связанный элемент. Функция каждой директивы compile вызывается только один раз при начальной загрузке Angular. Проверьте эту ссылку stackoverflow.com/questions/24615103/…

–

ssuperczynski

19 Янв 2016 в 20:01

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 зарезервирован.

0

brammekuhh 19 Янв 2016 в 17:53

Я удалил кавычки et и изменил модуль на mod, и результат тот же: / но я тестирую с ng-if в модулеForm следующим образом:

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

и ng-if возвращает false

–

Thibaud Ledeux

19 Янв 2016 в 18:20

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

3 ответа

Похожие вопросы

Новые вопросы

javascript