AngularJS:AngularJS渲染模板后如何运行其他代码?

2020/10/21 02:21 · javascript ·  · 0评论

我在DOM中有一个Angular模板。当我的控制器从服务中获取新数据时,它将更新$ scope中的模型,然后重新呈现模板。到目前为止一切都很好。

问题是,在模板已重新呈现并且在DOM中(在本例中为jQuery插件)之后,我还需要做一些额外的工作。

似乎应该有一个事件要听,例如AfterRender,但我找不到任何此类事件。也许一条指令可以走,但它似乎还为时过早。

这是一个概述我的问题的jsFiddleFiddle-AngularIssue

==更新==

基于有用的评论,我相应地切换到一个指令来处理DOM操作,并在该指令内实现了$ watch模型。但是,我仍然遇到相同的基本问题。$ watch事件内部的代码在模板被编译并插入DOM之前触发,因此,jQuery插件始终在评估一个空表。

有趣的是,如果我删除了异步调用,那么整个程序就可以正常工作,因此这是朝正确方向迈出的一步。

这是我更新的小提琴,以反映这些更改:http : //jsfiddle.net/uNREn/12/

这篇文章很旧,但是我将您的代码更改为:

scope.$watch("assignments", function (value) {//I change here
  var val = value || null;            
  if (val)
    element.dataTable({"bDestroy": true});
  });
}

参见jsfiddle

希望对您有帮助

首先,正确处理渲染的地方是指令。我的建议是通过像这样的指令来包装DOM操作jQuery插件。

我遇到了同样的问题,并提出了这个代码段。它使用$watch$evalAsync来确保您的代码在诸如指令之类的ng-repeat问题得到解决且诸如模板的形式{{ value }}得到渲染之后运行。

app.directive('name', function() {
    return {
        link: function($scope, element, attrs) {
            // Trigger when number of children changes,
            // including by directives like ng-repeat
            var watch = $scope.$watch(function() {
                return element.children().length;
            }, function() {
                // Wait for templates to render
                $scope.$evalAsync(function() {
                    // Finally, directives are evaluated
                    // and templates are renderer here
                    var children = element.children();
                    console.log(children);
                });
            });
        },
    };
});

希望这可以帮助您避免一些挣扎。

遵循Misko的建议,如果要进行异步操作,则可以使用$ timeout()代替(无效)

$timeout(function () { $scope.assignmentsLoaded(data); }, 1000);

使用$ evalAsync()(有效)

$scope.$evalAsync(function() { $scope.assignmentsLoaded(data); } );

小提琴我还添加了一个“删除数据行”链接,该链接将修改$ scope.assignments,模拟对数据/模型的更改-以表明更改数据有效。

概念概述”页面的运行时”部分说明,当您需要在当前堆栈框架之外但在浏览器呈现之前发生某些事情时,应使用evalAsync。(在这里猜测...“当前堆栈框架”可能包括Angular DOM更新。)如果在浏览器渲染后需要进行某些操作,请使用$ timeout。

但是,您已经发现,我认为这里不需要进行异步操作。

我发现最简单(便宜和愉快)的解决方案是,在显示的最后一个元素的末尾添加一个带有ng-show =“ someFunctionThatAlwaysReturnsZeroOrNothing()”的空跨度。当检查是否应显示span元素时,将运行此功能。执行此功能中的任何其他代码。

我意识到这不是最优雅的做事方式,但是它对我有用。

我有一个类似的情况,尽管略有相反,在动画开始时我需要删除加载指示器,但在移动设备上,angular的初始化速度要快于要显示的动画,并且使用ng-cloak不足,因为加载指示器很明显在显示任何真实数据之前将其移除。在这种情况下,我仅将我的return 0函数添加到第一个渲染的元素,然后在该函数中翻转了隐藏加载指示符的var。(当然,我在此功能触发的加载指示器中添加了ng-hide隐藏。

我认为您正在寻找$ evalAsync http://docs.angularjs.org/api/ng.$ro​​otScope.Scope#$evalAsync

最终,我找到了解决方案,我使用了REST服务来更新我的收藏集。为了转换数据表,jquery是以下代码:

$scope.$watchCollection( 'conferences', function( old, nuew ) {
        if( old === nuew ) return;
        $( '#dataTablex' ).dataTable().fnDestroy();
        $timeout(function () {
                $( '#dataTablex' ).dataTable();
        });
    });

我不得不经常这样做。我有一条指令,并且需要在模型内容完全加载到DOM之后做一些jquery内容。因此,我将我的逻辑放在该指令的link:函数中,并将代码包装在setTimeout(function(){.....},1)中;setTimout将在加载DOM之后触发,并且1毫秒是DOM加载之后代码执行之前的最短时间。这似乎对我有用,但是我希望angular一旦模板完成加载就引发一个事件,以便该模板使用的指令可以执行jquery的工作并访问DOM元素。希望这可以帮助。

您还可以创建一个在链接函数中运行代码的指令。

看到该stackoverflow答复

$ scope。$ evalAsync()或$ timeout(fn,0)都不对我可靠。

我必须将两者结合起来。我制定了一条指令,并且还设置了比默认值更高的优先级,以确保良好的性能。这是它的指令(请注意,我使用ngInject注入依赖项):

app.directive('postrenderAction', postrenderAction);

/* @ngInject */
function postrenderAction($timeout) {
    // ### Directive Interface
    // Defines base properties for the directive.
    var directive = {
        restrict: 'A',
        priority: 101,
        link: link
    };
    return directive;

    // ### Link Function
    // Provides functionality for the directive during the DOM building/data binding stage.
    function link(scope, element, attrs) {
        $timeout(function() {
            scope.$evalAsync(attrs.postrenderAction);
        }, 0);
    }
}

要调用该指令,您可以这样做:

<div postrender-action="functionToRun()"></div>

如果要在ng-repeat运行完成后调用它,我在ng-repeat和ng-if =“ $ last”中添加了一个空跨度:

<li ng-repeat="item in list">
    <!-- Do stuff with list -->
    ...

    <!-- Fire function after the last element is rendered -->
    <span ng-if="$last" postrender-action="$ctrl.postRender()"></span>
</li>

在某些情况下,您更新服务并重定向到新的视图(页面),然后在更新服务之前加载指令,然后可以使用$ rootScope。$ broadcast(如果$ watch或$ timeout失败)

视图

<service-history log="log" data-ng-repeat="log in requiedData"></service-history>

控制者

app.controller("MyController",['$scope','$rootScope', function($scope, $rootScope) {

   $scope.$on('$viewContentLoaded', function () {
       SomeSerive.getHistory().then(function(data) {
           $scope.requiedData = data;
           $rootScope.$broadcast("history-updation");
       });
  });

}]);

指示

app.directive("serviceHistory", function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {
           log: '='
        },
        link: function($scope, element, attrs) {
            function updateHistory() {
               if(log) {
                   //do something
               }
            }
            $rootScope.$on("history-updation", updateHistory);
        }
   };
});

我提供了一个非常简单的解决方案。我不确定这是否是正确的方法,但可以实际使用。让我们直接看一下我们想要渲染的内容。例如,在包含someng-repeat指令中,我会注意段落或整个html的文本长度(您可能还有其他东西!)。该指令将如下所示:

.directive('myDirective', [function () {
    'use strict';
    return {

        link: function (scope, element, attrs) {
            scope.$watch(function(){
               var whole_p_length = 0;
               var ps = element.find('p');
                for (var i=0;i<ps.length;i++){
                    if (ps[i].innerHTML == undefined){
                        continue
                    }
                    whole_p_length+= ps[i].innerHTML.length;
                }
                //it could be this too:  whole_p_length = element[0].innerHTML.length; but my test showed that the above method is a bit faster
                console.log(whole_p_length);
                return whole_p_length;
            }, function (value) {   
                //Code you want to be run after rendering changes
            });
        }
}]);

注意,代码实际上在渲染更改后运行,而不是完整渲染。但是我想在大多数情况下,只要发生渲染更改,您就可以处理这种情况。p如果只想在渲染完成后只运行一次代码,则可以考虑将此长度(或任何其他度量)与模型进行比较我对此表示感谢。

您可以使用angular-ui utils的'jQuery Passthrough'模块我成功地将jQuery touch轮播插件绑定到了一些图像,这些图像是我从Web服务检索异步并使用ng-repeat渲染的。

本文地址:http://javascript.askforanswer.com/angularjsangularjsxuanranmobanhouruheyunxingqitadaima.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!