Question

我已经使用隔离范围创建了指令。在视图中，我使用控制器作为属性。

当我使用ng repeat和隔离范围调用指令时，元素使用花括号。不使用模型值更新元素。

当我调试指令时，我得到了相同的花括号。

<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) {
   console.log($scope);
}

<强> 2。编译数据

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

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

第3。在运行指令之前绑定数据

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

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

AngularJs - 指令 - 元素与花括号

1 个答案: