在AngularJs

时间:2015-07-16 11:45:51

标签: angularjs templates binding angularjs-directive

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

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

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

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

1 个答案:

答案 0 :(得分:1)

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

首先,您可以使用ng-include这样做而不是创建自定义指令(请参阅此plunker):

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

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

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