Question

需要一点帮助才能完成它。但如果有人有更好的建议我是一个思想开放的人。

基本上我已经编写了一个基于指令属性交换模板的指令。

<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。但我可以忍受这个。

正如我之前提到的，如果有人有不同的想法/方法，或者在我的代码中发现了一些有趣的内容，请分享。

Answer 1

在一次演讲之后，我找到了两个解决方案。

首先，您可以使用ng-include这样做而不是创建自定义指令（请参阅此plunker）：

<div ng-show="showSelect" ng-include="'search-'+type+'-tpl.html'">

其次我指出这可能是使用ui-boostrap的$ modal（使用“templateUrl”）的模态。

我实际上倾向于选择第二个选项，因为你可以为每个模态定义一个控制器，模板，css等......这个模态更清晰可读。

在AngularJs

更新

1 个答案: