如何在角度元素在页面中呈现后调用JS函数？

问题描述：

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

我需要后执行JS功能{{specialOffer.Name}}被替换为它的价值。对不起，我是一个Angular的新手，试图解决现有代码上的一些错误。

我试过$（document）.ready或window.onload，但是这些事件太快了。

答

尝试使用NG-初始化，请参阅本

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

答

下面是做到这一点的方法之一。

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

每次specialOffer.Name变化，回调运行，并且DOM更新（意为{{specialOffer.Name}}被“填充”）。

但是这有一个“代码味道”。如果不了解上下文，我不能确定这是一种坏的方法，但我很悲观。查看this以更好地了解数据绑定的工作原理。

答

你可以这样做：它的一种可能性和讨论渲染时在指令内部是很好的。

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>

快乐帮助！

感谢您的评论。我试过了，但是当我的函数被调用时，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>

如何在角度元素在页面中呈现后调用JS函数？

相关推荐