我创建了一个生成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调用,并创建子组件。乍一看,一切看起来都很完美,但当我们在其中一个子组件中进行状态更改,然后在父组件中进行更改时,子组件将其状态重置为更改之前的状态。 我知道发生了什么,州政府没有被传递给家长