Angularjs指令DOM犯规更新

Question

我试图更新打印在DOM范围的数据。 HTML由指令创建。不过，这并不更新

HTML代码

<div ng-controller="triggerController"> 
    <the-click data-values="{{t_text}}"></the-click> 
</div> 

Javascript代码

angular.controller('triggerController', 
['$scope',function($scope){ 

     $scope.t_text = 'I am original'; 

     $scope.clickme = function(){ 
      $scope.t_text = 'I have been clicked'; 
     } 

    } 
]).directive('theClick', function(){ 
return { 
    scope: true, 
    restrict:'E', 
    link: function(scope, elm, attr){ 
     scope.sample = attr.values; 

     elm.bind('click', function(e){ 
      scope.clickme(elm); 
     }) 
    }, 
    controller:'triggerController', 
    template: '<h1>{{sample}}</h1>' 
}}) 

但是当我点击的HTML不会更新。为什么？

Answer 1

attr.$observe('values',function(){ 
     scope.sample = attr.values; 
    }); 

试试这个，你必须要观察的属性变化。

Answer 2

您必须修改脚本像这样：

angular.module('testapp', []) 
 
    .controller('triggerController', ['$scope', 
 
    function($scope) { 
 
     $scope.t_text = 'I am original'; 
 
     $scope.clickme = function() { 
 
     $scope.t_text = 'I have been clicked'; 
 
     } 
 
    } 
 
    ]).directive('theClick', function() { 
 
    return { 
 
     restrict: 'E', 
 
     scope:true, 
 
     template: '<h1 ng-click="clickme()">{{t_text}}</h1>' 
 
    } 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<div ng-app='testapp' ng-controller="triggerController"> 
 
    <the-click data-values="{{t_text}}"></the-click> 
 
</div>

Answer 3

你更新clickme方法，这就是所谓的回调里面$范围值。然后Angular无法知道您的数据模型已更新。您必须使用$ scope。$ apply（）强制角度刷新您的视图

$scope.clickme = function(){ 
    $scope.t_text = 'I have been clicked'; 
    $scope.$apply(); 
};