CODEWITHSUNDEEP
angularjs
Jeeva J
Jeeva J

Reputation: 3253

AngularJs - Directive - Elements are with the curly braces

I have created the directive with the isolated scope. In view, I am using controller as property.

When I call the directive with the ng repeat and the isolated scope, the elements are with the curly braces. Not updating the element with the model value.

When I debug the directive, I am getting the same curly braces.

<ul id="ul-data-repeat" my-directive>
              <li title='test'> 
                <span>{{homeCtrl.ngRepeatDatasource.name}}</span> 
              </li>
             <li ng-repeat='item in homeCtrl.ngRepeatDatasource.values'>
                    {{item.name}}
             </li>
</ul>

Just for the sample I have added this code. This is the logic. In my actual scenario, I will call the jquery plugin.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular.js"></script>
<script>
  angular.module('myApp', [])
  .controller('homeController',function($scope){
    var vm=this;
    vm.data={
       name:'Name'
      , values:[{val:'values1'},{val:'values2'}]
    }
    
  }).directive('myDirective',['$injector',function($injector){
        return{
          scope: {
            data:'=data'
            },   
            link: function ($scope, $element, $attributes) {
             
              debugger
              $($element).html($($attributes.myDirective).html());
              
          }
        }
  }]);
  </script>

<div ng-app='myApp'>
  <div ng-controller='homeController as homeCtrl'>
  <div>
    <h1>Without directive</h1>
   <div id='data'>
      {{homeCtrl.data.name}}
    
    <div ng-repeat='item in homeCtrl.data.values'> 
      {{item.val}}
      </div>
     </div>
    </div>
    
    <div>
      <h1>With directive</h1>
      
      <div my-directive='#data'>
        
        </div>
      </div>
</div>
 </div>

how to get the updated value?

Upvotes: 0

Views: 450

Answers (1)

hurricane
hurricane

Reputation: 6724

If you are using scope you can send your data to directive. And you want to use your data without braces you need to compile it with your current scope. This means you need to send your scope to directive again.

1. Data Send

<div my-directive='item'>
</div>

link: function ($scope, $element, $attributes) {
   console.log($scope);
}

2. Compile data

<div my-directive='item'>
</div>

link: function ($scope, $element, $attributes) {
   $compile($($attributes.myDirective).html())($scope);
}

3. Bind data before run directive

<div ng-bind="item.val" id="#data" myDirective="#data">
</div>

data:'@', 
link: function ($scope, $element, $attributes) {
    $($element).html($($attributes.myDirective).html());
}

Upvotes: 1

Related Questions