当前位置: 首页 > 面试题库 >

如何在AngularJS指令中重新渲染模板?

邵星河
2023-03-14
问题内容

我创建了一个生成Twitter按钮的指令。由于这些按钮上的作用域变量可能会更改,因此我需要在按钮发生时重新构建它。目前,我正在使用jQuery
empty()链接元素并重建按钮。

app.directive 'twitterShare', ($timeout, $window) ->
    restrict: 'E'
    template: '<a href="https://twitter.com/share" class="twitter-share-button" data-text="{{ text }}" data-url="{{ url }}">Twitter</a>'
    scope:
        text: '@'
        url: '@'
    link: (scope, el, attrs) ->
        scope.$watch 'text', -> rebuild()
        scope.$watch 'url' , -> rebuild()

        rebuild = ->
            $(".twitter-share-button").remove()
            tweet = $ '<a>'
            .attr 'href', 'https://twitter.com/share'
            .attr 'id', 'tweet'
            .attr 'class', 'twitter-share-button'
            .attr 'data-lang', 'en'
            .attr 'data-count', 'none'
            .text 'Tweet'

            el.prepend tweet
            tweet.attr 'data-text', scope.text
            tweet.attr 'data-url', scope.url
            $window.twttr.widgets.load()

有没有办法让指令完全重新呈现模板呢?


问题答案:

这是一个可重用的指令,您可以使用它在发送事件时重建被包含的内容:

app.directive('relinkEvent', function($rootScope) {
    return {
        transclude: 'element',
        restrict: 'A',
        link: function(scope, element, attr, ctrl, transclude) {
            var previousContent = null;

            var triggerRelink = function() {
                if (previousContent) {
                    previousContent.remove();
                    previousContent = null;
                }

                transclude(function (clone) {
                    element.parent().append(clone);
                    previousContent = clone;
                });

            };

            triggerRelink();                
            $rootScope.$on(attr.relinkEvent, triggerRelink);

        }
    };

});

这是一个jsFiddle演示其工作原理:http :
//jsfiddle.net/robianmcd/ZQeU5/

请注意,每次单击“触发器重新链接”按钮时,输入框的内容将如何重置。这是因为每当触发事件时,都会删除输入框并将其添加到DOM。

您可以按原样使用此指令,也可以对其进行修改,以使其触发scope.$watch()而不是事件。



 类似资料:
  • 问题内容: 我正在使用SVG和angular.js进行大型项目,并且需要对svg指令模板的坚实支持。不幸的是,当angular渲染模板时,它将创建DOM节点,而不是SVG节点。我当前的解决方法是使用jquery.svg自己管理创建和删除节点,但是它受到限制。示例:http://plnkr.co/edit/Xk8wM3?p = preview 我想让指令成为实际的svg元素,而不是一些没有任何实际作

  • 问题内容: 由于存在题外问题,这是一种重写: 我写了一个下拉菜单指令。我将指令两次用作工作流。第一个下拉菜单通过更改操作触发第二个模型的刷新。尽管模型正确更新,但视图未正确更新。在下拉菜单中多次选择项目时,即使角度模型的console.log()正确,第二个下拉菜单也会显示带有新项目的旧项目。 该视图具有无限递归。使用具有ng / template的ID的ng-include可以自我递归: 我最初

  • 问题内容: 我有一些自定义验证代码,其中包括$ formatter。(为了正确起见,我将货币以便士存储,但以磅为便士显示。) 如果用户在输入中键入“ 10”(这是一个有效值),则输入移至下一个字段后,输入仍显示“ 10”。 我希望它显示10.00以保持一致性。 如果模型将值更改为1000,那么格式化程序将使该字段显示为“ 10.00”。 我希望格式化程序在field.blur()上运行(只要输入有

  • 问题内容: 在基于多个用户上下文渲染了整个页面并提出了几个请求之后,我希望用户能够切换上下文并再次重新渲染所有内容(重新发送所有请求等)。如果我只是将用户重定向到其他地方,则一切正常: 如果使用,那么正在等待响应的请求中的某些请求将被取消,因此无法使用。此外,黑客也不起作用(什么也没有发生)。 还有另一种方法可以重新渲染页面,而无需再次手动发出所有请求吗? 问题答案: 为了进行记录,要强制angu

  • 问题内容: 我想在3个地方使用相同的HTML模板,只是每次使用不同的模型。我知道我可以从模板访问变量,但是名称会有所不同。 有没有办法将模型传递给ngInclude? 这是我想要实现的,当然add-variable属性现在不起作用。然后,在我包含的模板中,我将访问detailsObject及其属性。 如果我使用ng-include的方法不好,还有其他应该尝试的方法吗? 问题答案: 注意:这不是我的

  • 我对react还比较陌生,我一直在分解一个web应用程序,并用react组件替换部分。我现在正在开发一个组件,其中包含我创建的几个不同组件。 在新组件中,我在componentDidMount函数中进行API调用,并创建子组件。乍一看,一切看起来都很完美,但当我们在其中一个子组件中进行状态更改,然后在父组件中进行更改时,子组件将其状态重置为更改之前的状态。 我知道发生了什么,州政府没有被传递给家长