Angularjs - Scope value is not applied in template

Question

I have used the directive scope in directive template. I have tried to get the html from template cache which was stored earlier.

But the current directive scope is not applied to the directive. I don't what will be the reason.

I have tried to compile the template and get the value. But not applied.

contentString = $templateCache.get('template/MyTemplate')

var div = document.createElement("div");
div = angular.element(div).html(contentString);
var s = $compile(div.contents())($scope);

template/MyTemplate would be following

<div>
   {{obj.value}}
</div>

Directive scope like following,

 link: function ($scope, $element, $attributes) {
    $scope.obj.value="This is my test"
 }

I got the output like

<div class="ng-scope">
    {{obj.value}}
</div>

What will be the issue?

Abdul Mateen Mohammed · Accepted Answer · 2016-10-14 15:27:01Z

Check this example which is using a custom directive with an isolated scope. I hope the below examples will be of help to you.

angular
  .module('demo', [])
  .directive('hello', hello);
  
  hello.$inject = ['$templateCache', '$compile'];
  
  function hello($templateCache, $compile) {
    var directive = {
      scope: {
      },
      link: linkFunc
    };
    
    return directive;
    
    function linkFunc(scope, element, attrs, ngModelCtrl) {
      scope.obj = {
        value: 'Hello, World!'
      };
      
      var template = $templateCache.get('templateId.html');
      element.html(template);
      $compile(element.contents())(scope);
    }
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="demo">
  <hello></hello>
  <script type="text/ng-template" id="templateId.html">
    <div>
      {{obj.value}}
    </div>
  </script>
</div>

Another example using controller aliasing syntax i.e. controller as with a directive to be consistent with using controller as with view and controller pairings

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController)
  .directive('hello', hello);
  
  function DefaultController() {
    var vm = this;
    vm.message = 'Hello, World!';
  }
  
  hello.$inject = ['$templateCache', '$compile'];
  
  function hello($templateCache, $compile) {
    var directive = {
      link: linkFunc,
      scope: {
        message: '='
      },
      controller: HelloController,
      controllerAs: 'vm',
      bindToController: true
    };
    
    return directive;
    
    function linkFunc(scope, element, attrs, ngModelCtrl) {
      var template = $templateCache.get('templateId.html');
      element.html(template);
      $compile(element.contents())(scope);
    }
  }
  
  function HelloController() {
    var vm = this;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <hello message="ctrl.message"></hello>
    <script type="text/ng-template" id="templateId.html">
    	<p>{{vm.message}}</p>
  	</script>
  </div>
</div>

Collectives™ on Stack Overflow

Angularjs - Scope value is not applied in template

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related