需要一点帮助才能完成它。但如果有人有更好的建议我是一个思想开放的人。
基本上我已经编写了一个基于指令属性交换模板的指令。
<div id="popup" class="popup my-directive" type="player" style="display: none;"></div>
我遇到的问题是更改type
属性,以便触发$digest
并重新评估我的指令。
$scope.selectTeam = function () {
$scope.type = 'team';
//$scope.$apply(function () {
// bind directive
$(".popup").attr("type", "team");
// show popup div
$(".popup").show();
//});
};
type
属性的目的是跟踪哪个模板绑定到popup
div。
app.directive('myDirective', function () {
return {
restrict: 'AEC', // Attribute, Element, Class
transclude: true, // expose controller scope
templateUrl: function(element, attr){
var type = typeof attr.type !== 'undefined' ? attr.type : 'player';
if(!type) return;
return 'search-' + type + '-tpl.html';
},
}
});
如需直播示例,请查看我的plunker。
我现在尝试使用$compile
在每个选择函数中使用新popup
值构建我的type
,但实际上并不喜欢这种方法。
好的,我已经比原先预期的更快地破解了它。直播plunker。
我引入控制器的变化:
$scope.selectTeam = function () {
$scope.type = 'team'; // trigers $digest
$(".popup").replaceWith($compile(angular.element(document).find("my-directive").attr("type", "team"))($scope));
$(".popup").show();
};
我引入HTML的更改:
<my-directive id="popup" class="popup" type="player" style="display: none;"></my-directive>
当我尝试搜索时,我注意到的唯一问题是Cannot read property 'insertBefore' of null
。但我可以忍受这个。
正如我之前提到的,如果有人有不同的想法/方法,或者在我的代码中发现了一些有趣的内容,请分享。
答案 0 :(得分:1)
在一次演讲之后,我找到了两个解决方案。
首先,您可以使用ng-include这样做而不是创建自定义指令(请参阅此plunker):
<div ng-show="showSelect" ng-include="'search-'+type+'-tpl.html'">
其次我指出这可能是使用ui-boostrap的$ modal(使用“templateUrl”)的模态。
我实际上倾向于选择第二个选项,因为你可以为每个模态定义一个控制器,模板,css等......这个模态更清晰可读。