Custom directive with dynamic template and binding parent scope to ng-model

Question

I have a view that contains a template specified in a custom directive. The template that is used in the custom directive depends on 'dynamicTemplate':

View:

<div ng-controller="MyController">
    <custom-dir dynamicTemplate="dynamicTemplateType"></custom-dir>
    <button ng-click="ok()">Ok</button>
</div>

View's Controller:

 myModule
    .controller('MyController', ['$scope', function ($scope) {
        $scope.dynamicTemplateType= 'input';
        $scope.myValue = "";
        $scope.ok = function()
        {
           // Problem! Here I check for 'myValue' but it is never updated!
        }

Custom Directive:

 myModule.directive("customDir", function ($compile) {

    var inputTemplate = '<input ng-model="$parent.myValue"></input>';
    var getTemplate = function (templateType) {
        // Some logic to return one of several possible templates 
        if( templateType == 'input' )
        {
          return inputTemplate;
        }
    }

    var linker = function (scope, element, attrs) {
         scope.$watch('dynamicTemplate', function (val) {
            element.html(getTemplate(scope.dynamicTemplate)).show();
        });

        $compile(element.contents())(scope);
    }

    return {
        restrict: 'AEC',
        link: linker,
        scope: {
            dynamicTemplate: '='
        }
    }
});

In this above example, I want 'myValue' that is in MyController to be bound to the template that is in my custom directive, but this does not happen.

I noticed that if I removed the dynamic templating (i.e. the contents in my directive's linker) and returned a hardcoded template instead, then the binding worked fine:

 // If directive is changed to the following then binding works as desired
 // but it is no longer a dynamic template:
 return {
            restrict: 'AEC',
            link: linker,
            scope: {
                dynamicTemplate: '='
            },
            template: '<input ng-model="$parent.myValue"></input>'
        }

I don't understand why this doesn't work for the dynamic template?

I am using AngularJS 1.3.0.

score 0 · Answer 1 · edited May 23 '17 at 10:27

0

Maybe you should pass that value into your directives scope, instead of only dynamicTemplate, i think it should work.

You have a good answer about directives scope here: How to access parent scope from within a custom directive *with own scope* in AngularJS?

Hope I was of any help.

edited May 23 '17 at 10:27

Community

1
1

answered Jan 12 '15 at 17:55

cagica

678
4
23

1

Please include any relevant code here. Links change over time and this answer will not work down the road, if it does. – rfornal Jan 12 '15 at 18:00
Sorry, i'm taking my first steps here in stackoverflow. I will try to improve my answer. Thank you. – cagica Jan 12 '15 at 21:16

score 0 · Answer 2 · answered Oct 01 '16 at 17:58

js directive :

angular.module('directive')
.directive('myDirective', function ($compile) {

  var tpl1 ='<div class="template1">{{data.title}}</div>';
  var tpl2 ='<div class="template2">Hi</div>';

  var getTemplate = function (data) {
    if (data.title == 'hello') {
      template = tpl1;
    }
    else {
      template = tpl2;
    }
    return template;
  };

  var linker = function (scope, element, attrs, ngModelCtrl) {

    ngModelCtrl.$render = function () {

    // wait for data from the ng-model, particulary if you are loading the data from an http request
      if (scope.data != null) {
        element.html(getTemplate(scope.data));
        $compile(element.contents())(scope);
      }
    };

  };

  return {
    restrict: "E",
    require: 'ngModel',
    link: linker,
    scope: {
    data: '=ngModel'
    }
  };

});

html :

  <my-directive
    ng-model="myData">
  </my-directive>

js controller:

$scope.myData = {title:'hello'};

Custom directive with dynamic template and binding parent scope to ng-model

2 Answers2