0

Is it possible to pass a parameter to a directive and to set that value as the directive scope?

Example:

angular
.module('app', [])
.controller('CTRL', function($scope) {
    $scope.some_value = {
        instance1: {
            key1: 'value11',
            key2: 'value12'
        },
        instance2: {
            key1: 'value21',
            key2: 'value22'
        },
    };
})
.directive('uiClock', function() {
    return {
        restrict: 'E',
        scope: {},
        template: template,
        link: function(scope, element, attr) {

            // scope should now contain either (first directive)
            // {
            //    key1: 'value11',
            //    key2: 'value12'
            // }
            // or (second directive)
            // {
            //    key1: 'value21',
            //    key2: 'value22'
            // }
            console.log(scope);

        }
    };
});

<div ng-controller="Ctrl">
    <ui-clock ng-bind="some_value.instance1"></ui-clock>
    <ui-clock ng-bind="some_value.instance2"></ui-clock>
</div>

The reason I want to do this is I have multiple instances of same directive and each should modify the value passed as parameter from the parent scope.

Any thoughts?

3
  • And you want the changes inside of those directives to be visible in the parent scope? I would like to see the template code for those directives, as I can't really imagine why you would need that. It would be useful to know what kind of two-way data binding you would expect from a solution. Commented Aug 28, 2015 at 10:43
  • The changes of those directives are visible in the template code of the directive. In the controller I am loading and saving them on application load&exit. Commented Aug 28, 2015 at 10:50
  • This does not help me to understand your expected behaviour. If the changes should be visible only inside of the directives, then the second version of Paul Boutes answer could be appropriate, even though the two-way data binding he uses is obsolete in this case. If you need the changes to be visible outside of the directive scope you should add watchers to his solution. Commented Aug 28, 2015 at 11:35

1 Answer 1

2

You should use the two-way data binding.

In your directive, you can specify an isolate scope, and use the = syntax, which is pretty useful.

Controller

(function(){

function Controller($scope) {

  $scope.some_value = {
      instance1: {
          key1: 'value11',
          key2: 'value12'
      },
      instance2: {
          key1: 'value21',
          key2: 'value22'
      },
  };

}

angular
.module('app', [])
.controller('ctrl', Controller);

})();

Directive

(function(){

  function directive($compile) {
    return {
        restrict: 'E',
        scope: {
          data: '='
        },
        templateUrl: 'template.html',
        link: function(scope, element, attr) {
          var elm = angular.element(element);
          //For all key in scope.data
          Object.keys(scope.data).forEach(function(key){
            //Create a new property for our isolate scope
            scope[key] = scope.data[key];
            //Add attr to our element
            elm.attr(key, scope[key]);
          });
          //Remove our data attribute
          elm.removeAttr('data');

          //Then we can access to scope.key1 & scope.key2
          console.log(scope.key1);
          console.log(scope.key2);

        }
    };
  }

angular
  .module('app')
  .directive('directive', directive);

})();

Template

<div>Key 1 : {{key1}}</div>
<div>Key 2 : {{key2}}</div>

Then you can call your directive, by passing specific data to our isolate scope. If you want, you can remove data attribute for the parent element and replace it by the value of your object.

HTML

  <body ng-app='app' ng-controller="ctrl">

    <directive data='some_value.instance1'></directive>
    <directive data='some_value.instance2'></directive>

  </body>

If you check your directive element, the data attribute will be removed and replace by key1 = value... etc ...

You can see the Working Plunker

4
  • Thank you for this answer but this is not what I am trying to accomplish. The scope of the directive must be equal to the value of the variable set as parameter. So accessing scope.data in the directive won't help. I need to have scope.key1. Commented Aug 28, 2015 at 10:38
  • Note that this will have the key data defined on the scope and not the keys key1 and key2 as asked for in the question. Commented Aug 28, 2015 at 10:39
  • @CatalinMunteanu i have updated my code, in order to match with your problem. Now you can access to scope.key1, scope.key2 into your directive. Commented Aug 28, 2015 at 11:06
  • Yes this works, but there will be no two way data binding anymore for those keys. It would be necessary to write watchers for data to update and/or remove the keys on the isolate scope and other way around. I still think the best solution would be your initial one. Commented Aug 28, 2015 at 11:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.