Question

尝试动态渲染模板，如何在{{tag}}渲染完成后运行指令？

指令：

angular.module('services', [])
    .directive('demo', function() {
        return {
            templateUrl: '/template.html',
            restrict: 'C'
        }
    });

控制器：

angular.module('controller', [])
    .controller('DemoCtrl', ['$scope', function($scope) {
        $scope.tag = "demo";
        $scope.clickHandler = function() {
            // do something when click button
        }
    }]);

视图：

<button ng-click="clickHandler()">Button</button>
<div class="{{tag}}"></div>

Answer 1

您可以在directive以下结构中使用

 app.directive('example', function() {

    var directive : {
        link:link,
        restrict:'C',
        templateUrl:'...'
    } 

    function link($scope,$element,$attrs, $rootScope){
      angular.element(document).ready(function() {
         // dom here
      })
    }

    return directive;
}

尝试一下，看看它是否适合你。

Answer 2

由于@Cosmo写了它需要在 link 函数中完成，而是在等待整个文档，你只能等待指令dom准备好了。链接函数的第二个参数是 $ element ，您可以使用它。

app.directive('example', function() {

var directive : {
    link:link,
    restrict:'C',
    templateUrl:'...'
} 

function link($scope, $element, $attrs, $rootScope){
  $element.ready(function() {
     // dom here
  })
}

return directive;
}

如何在dom完成Angularjs中的渲染后运行指令

2 个答案: