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()); 
}