如何在角度元素在頁面中呈現後調用JS函數？

我有以下DIV：如何在角度元素在頁面中呈現後調用JS函數？

<div style="font-size:15px;" class="title"> 
    <div>{{specialOffer.Name}}</div> 
</div>

我需要後執行JS功能{{specialOffer.Name}}被替換爲它的價值。對不起，我是一個Angular的新手，試圖解決現有代碼上的一些錯誤。

我試過$（document）.ready或window.onload，但是這些事件太快了。

來源

2015-10-13 Alexandru Pupsa

嘗試使用NG-初始化，請參閱本

<div style="font-size:15px;" class="title"> 
    <div ng-init="functionName(specialOffer.Name)"> 
     {{specialOffer.Name}} 
    </div> 
</div>

來源

2015-10-13 15:43:33

下面是做到這一點的方法之一。

$scope.$watch('specialOffer.Name', function(newVal, oldVal) { 
    callYourFunction() 
});

每次specialOffer.Name變化，回調運行，並且DOM更新（意爲{{specialOffer.Name}}被「填充」）。

但是這有一個「代碼味道」。如果不瞭解上下文，我不能確定這是一種壞的方法，但我很悲觀。查看this以更好地瞭解數據綁定的工作原理。

來源

2015-10-13 15:44:43

你可以這樣做：它的一種可能性和討論渲染時在指令內部是很好的。

angular.module('myApp',[]) 
 
.directive('afterRender', function() { 
 
    return { 
 
    scope: { 
 
     cb: '&' 
 
    }, 
 
    link: function($scope, element, attrs) { 
 
     var watch = $scope.$watch(function() { 
 

 
     }, function() { 
 
     // Runs after rendered 
 
     $scope.$evalAsync(function() { 
 
      $scope.cb(); 
 
     }); 
 
     }); 
 
    }, 
 
    }; 
 
}) 
 
.controller('myCtrl',function($scope){ 
 
      
 
    $scope.specialOffer = {Name:"Woops!"} 
 
    $scope.callMeAfterRender = function(){ 
 
    alert('Hey I am called :)'); 
 
    } 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script> 
 
<div ng-app='myApp' ng-controller='myCtrl'> 
 
<span after-render 
 
     cb='callMeAfterRender()'>{{specialOffer.Name}}</span> 
 
</div>

快樂幫助！

來源

2015-10-13 16:48:19

感謝您的評論。我試過了，但是當我的函數被調用時，div是空的，看起來像這樣：

–

你確定你的雙向綁定正在工作嗎？ {{specialOffer.Name}}不是空的？我給你的解決方案代碼始終在工作。 –

下面是解決方案。請重新找到相同的。這裏的問題是通過使用angularjs指令後鏈接解決的。

app.directive('afterRender', function() { 
return { 
    link: { 
     post: function ($scope, elem, attr) {    
       $timeout(function() { 
        alert('Data was rendered'); 
       // add your java script code    
       }, 0); 
      } 
     }    
    }; 
}); 






<div ng-app='myApp' ng-controller='myCtrl'> 
    <span after-render>{{expression}}</span> 
</div>

來源

2018-02-07 09:06:31

如何在角度元素在頁面中呈現後調用JS函數？

回答

相關問題