如何让我的指令在运行ng-bind-html内容之后运行？

假设我想制作一个名为addHello的指令，将元素hello!添加到以下段落I say 。这里有一个Plunk：如何让我的指令在运行ng-bind-html内容之后运行？

HTML

<p ng-bind-html="whatIsay" addHello></p>

AngularJS

app.controller('MainCtrl', function($scope, $sce) { 
    $scope.whatIsay = $sce.trustAsHtml('<span>I say </span>') 
}) 

app.directive('addHello', function() { 
    return { 
    link: function(scope, element) { 
     element.append(angular.element('<span>hello!</span>')) 
    } 
    } 
})

最终的结果应该是I say hello!

基本上，我想ng-bind-html来完成工作的话，我想我的指令addHello在它之后运行。

来源

2014-02-09 M.K. Safi

并不美观，但如果您在指令的链接函数中执行$ timeout调用，您将获得所需的效果。 see the plunkr here

link: function(scope, element) { 
    $timeout(function() { 
    element.append(angular.element('<span>hello!</span>')) 
    }, 0); 
}

我不认为重点工作是在这里，因为该元素尚未更新？也许有人知道更好。

来源

2014-02-09 23:11:41 Oliver

它不起作用 – navid

如果你不想使用$timeout黑客，你可以不设ng-bind-html和参数添加到您的指示，例如：

<body ng-controller="MainCtrl"> 
    <p add-hello="whatIsay"></p> 
</body>

而这里的指令代码：

app.directive('addHello', function() { 
    return { 
     scope: { 
      trustedHtml: "=addHello", 
     }, 
     link: function(scope, element) { 
      element.append("<p>hello</p>" + scope.trustedHtml.toString() + "<p>goodbye</p>");    
     } 
    }; 
});

而这里是plunker。

来源

2014-02-10 00:23:17

是的，那会更好。 – Oliver

如何让我的指令在运行ng-bind-html内容之后运行？

回答

相关问题