AngularJs - 指令 - 元素與花括號

Question

我創建了隔離範圍的指令。 在視圖中，我使用控制器作爲屬性。

當我用ng重複和隔離範圍調用指令時，元素與花括號一起使用。不用模型值更新元素。

當我調試指令時，我得到相同的大括號。

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

僅用於示例我已添加此代碼。這是邏輯。 在我的實際場景中，我會調用jquery插件。

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

如何獲得更新的價值？

Answer 1

如果您使用範圍，您可以將數據發送到指令。而且你想使用你的數據，而不需要使用你的當前範圍進行編譯。這意味着您需要再次將範圍發送給指令。

1.資料前執行指令

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

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

3.綁定數據發送

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

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

2.編譯數據

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

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