gpt4 book ai didi

angularjs - 嵌入: 'element' along with templateUrl, 可行吗?

转载 作者:行者123 更新时间:2023-12-01 17:41:45 24 4
gpt4 key购买 nike

我有一个指令,将元素放在一个隔离的范围内并向其应用 Controller ,以便它可以处理状态、AJAX 调用和验证。

<div login> 
<div class="dropdown" ng-click="loginctrl.showForm()">
Login <span class="caret"></span>
</div>
</div>

当前嵌入的元素变为:

<!-- login -->
<div class="login">
<div class="dropdown" ng-click="loginctrl.showForm()">
Login <span class="caret"></span>
</div>
</div>

但是我有一个 templateUrl,我想将其与指令的内容一起附加,因此我使用 transinclude: 'element' 来细化嵌入:

angular
.module('Login.module', [])
.controller('LoginCtrl', function(){
this.login = function(){
// do ajax calls for login
};

this.logout = function(){
// do ajax calls for logout
};

this.facebook = function(){
// do ajax calls for facebook login
};

this.showForm = function(){
// shows the template form
};

this.user = {}; // user model
})
.directive('login', function(){
return {
restrict: 'A',
transclude: 'element',
controllerAs: 'loginctrl',
controller: 'LoginCtrl',
replace: false,
templateUrl: '/templates/login',
link: function(scope, element, attrs, ctrl, transclude){
transclude(scope, function(clone){
clone.wrap('<div class="login"></div>');
element.after(clone); // "element" is the <!-- login --> HTML comment
// "clone" is the transcluded contents of the div, that is the login with ng-click, etc
});
}
}
});

templateUrl(即登录/注册表单)通过AJAX下载(在开发工具中查看),但它不能在链接函数或嵌入中使用。我错过了什么吗?在这方面找不到任何帮助,我已经找了几天了。

问题的简化版本 http://plnkr.co/edit/NzS7cAej17RnQxARlli3?p=preview

最佳答案

评论后编辑:

我已更新this plnkr与以下内容,我认为这符合你的要求。我对正在发生的事情做了一些额外的解释。

.directive('login', function() {
var useElementTransclusion = true;
var replace = true;
return {
restrict: 'A',
transclude: useElementTransclusion ? 'element' : true,
controllerAs: 'loginctrl',
controller: 'LoginCtrl',
replace: useElementTransclusion ? true : replace,
templateUrl: 'login.html',
link: function(scope, element, attrs, ctrl, transclude) {
// If transclude is 'element', then the element argument is
// the HTML comment which is put in the place of the entire
// element on which the directive was applied.
// If transclude is true, then the element argument depends
// on the value of replace. If replace is true then element
// is the content of the template. If replace is false then
// element is the element on which the directive was applied.
transclude(scope, function(clone) {
// If transclude is 'element' then clone is an array
// containing the single element on which the directive
// was applied.
// If transclude is true then clone is an array containng
// the children of the element on which the directive was
// applied.
element.wrap('<div class="login"></div>');
element.after(clone);
});
}
}
});

如果你使用transinclude; 'element' 那么你必须使用 replace: true,作为某种解释 see this issue 。如果您使用 transinclude: true ,您可以使用任何您想要的 replace 值,具体取决于您想要的相对于应用该指令的原始 HTML 节点的最终结果(无论它是否仍然存在)。

<小时/>

以下是原答案,无特殊原因留在这里...

不完全确定这是否会导致您期望的确切结果,但是......

.directive('login', function() {
return {
restrict: 'A',
transclude: 'element',
controllerAs: 'loginctrl',
controller: 'LoginCtrl',
replace: true,
templateUrl: '/templates/login',
link: function(scope, element, attrs, ctrl, transclude) {
transclude(scope, function(clone) {
element.after(clone);
clone.wrap('<div class="login"></div>');
});
}
};
})

this fork of your plnkr中所示.

变化是:

  • 将替换更改为“true”
  • 在包装之前将克隆添加到 DOM,以便包装也添加到 DOM。

关于angularjs - 嵌入: 'element' along with templateUrl, 可行吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23039235/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com