I pass scope values to my directive but it's undefined

Question

I have a problem to pass into my directive 3 parameters from the scope of my controller.

See the directive :

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

And in the html i call the directive :

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

The 3 values moduleForm, applications and standards are in my scope controller. But when i test in the template of the directive, all values are undefined, i don't understand why?

<h4>module : {{(module === undefined) ? 'undefined' : 'defined'}}</h4> -> **undefined**
<h4>applications : {{(applications === undefined) ? 'undefined' : 'defined'}}</h4> -> **undefined**
<h4>standard : {{(standards === undefined) ? 'undefined' : 'defined'}}</h4> -> **undefined**

when i put a watch on 'module' in the link function of the directive with a console.log, nothing at all.

the template of the directive is a bootstrap modal which contain a form to add or edit a module :

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

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

So, if you have an idea, thanks in advance.

How are moduleForm, applications and standards defined? Are they asynchronously populated? — Prashant, Jan 19 '16 at 14:57
@Alon i try with the ng-if and the ng-if return false i try with just modulForm and the result is the same — Thibaud Ledeux, Jan 19 '16 at 15:03
Looks like directive is being used in the wrong scope, scope where those variables are not defined. Check that the directive element is the child of element where ng-controller="AdministrationCtrl" or is the controller loaded via ngRoute? — Prashant, Jan 19 '16 at 15:12
@PrashantPalikhe : the `` is in the html page where there is the `ng-controller="AdministrationCtrl"` — Thibaud Ledeux, Jan 19 '16 at 15:39

score 1 · Answer 1 · answered Jan 19 '16 at 16:09

it's good i find a solution :

see the directive :

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

i add a '$' to scope and it's good :) but i don't understand why it's work now so if someone know why, he will can explain it to me. thanks :)

ssuperczynski · Answer 2 · 2016-01-19T14:51:04.680

0

Is this what you are looking for?

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

}());

edited Jan 19 '16 at 14:51

answered Jan 19 '16 at 14:44

ssuperczynski

3,190
3
44
61

the form.bootstrapValidator is to validate the data in the form. if i put '...' it's because i wanted just to reduce the text^^ but why you put the comportement the directive in the controller and not in the link function? – Thibaud Ledeux Jan 19 '16 at 15:34
Each directive's `controller` function is called whenever a new related element is instantiated. Each directive's `compile` function is only called once, when Angular bootstraps. Check this link http://stackoverflow.com/questions/24615103/angular-directives-when-and-how-to-use-compile-controller-pre-link-and-post – ssuperczynski Jan 19 '16 at 17:01

score 0 · Answer 3 · answered Jan 19 '16 at 14:53

Try with removing the quotes from your scope attributes in wcModuleForm directive.

Like this:

return {
    restrict: 'E',
    scope: {
        module: '=',
        applications: '=',
        standards: '='
    },
    templateUrl: 'app/administration/directives/module/wc-module-form.tpl.html',
    link: function(scope, form)
    {

        form.bootstrapValidator({...});
    }
};

If it doesn't work, maybe module is a predefined attribute. Try using another name. Like <directive data-application="..."></directive> will not work because data is reserved.

i removed the quotes et and change module to mod and the result is the same :/ but i test with a ng-if on the moduleForm like this : ` ` and the ng-if return false — Thibaud Ledeux, Jan 19 '16 at 15:20

I pass scope values to my directive but it's undefined

3 Answers3