Question

我有两个按钮。按下时，它会显示一个带有som文本的模态。但我还想根据按下的按钮动态添加一些html。

我尝试了$observe和$watch两种方法，但我遇到了问题。

这是我的代码。

angular.module('TM', [])

.controller('protocolCtrl', function(){
    this.text = 'Now looking at the protocol part';
    this.modalId = 'protocolModal';
})

.controller('categoryCtrl', function(){
    this.text = 'Now looking at the category part';
    this.modalId = "categoryModal";
})

.directive('modalDirective', function(){
    return {
        restrict: 'E',
        scope: {
            ctrl: '=',
            modalId: '@',
        },
        template:  ['<div id="{{modalId}}" class="modal fade" role="dialog">', 
                      '<div class="modal-dialog">',
                        '<div class="modal-content">',
                        '<div class="modal-header">',
                        '<h4 class="modal-title">Modal Header</h4>',
                        '</div>',
                        '<div class="modal-body">',
                        '<p> {{ ctrl.text }} </p>',
                        '</div>',
                        '<div class="modal-footer">',
                        '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>',
                        '</div>',
                        '</div>', 
                        '</div>',
                        '</div>'].join(''),
        link: function(scope, element, attrs) {
            element.$observe('modalId', function(){
                var modal = element.find('#{{modalId}}');
                if(modal == 'protocolModal'){
                    element.find('#{{modalId}}').append('<div>this is a protocol test...</div>');
                } else {
                    element.find('#{{modalId}}').append('<div>this is a category test...</div>');
                }
            });
        }
    }
});

Answer 1

我认为不存在element.$observe - attrs.$observe和scope.$watch。你已经在范围上有modelId，所以让我们使用它。

此外，不是基于id .find，而是注入一个元素作为模板的占位符，并相应地replaceWith：

template: '<div id="{{modalId}}">\
             ...\
             <div class="modal-body">\
               <template-placeholder></template-placeholder>\
             </div>\
           </div>",
link: function(scope, element){
  // ...

  var unwatch = scope.$watch("modalId", function(val){
    var placeholder = element.find('template-placeholder');
    if(val == 'protocolModal'){
       placeholder.replaceWith('<div>this is a protocol test...</div>');
    } else {
      placeholder.replaceWith('<div>this is a category test...</div>');
    }

    unwatch(); // seems like you don't really need to set it again
  }
}

Answer 2

请参阅我更新了您的Fiddle

在链接功能中使用 attr 。因为你已经给了属性你的HTML，即： modal-id =＆＃34; {{pctrl.modalId}}

的

的
<modal-directive ctrl="pctrl" modal-id="{{pctrl.modalId}}"></modal-directive>

的

的
if(attrs.modalId == 'protocolModal'){ element.find('#{{modalId}}').append('<div>this is a protocol test...</div>'); } else { element.find('#{{modalId}}').append('<div>this is a category test...</div>'); }

的

修改：

使用 $ timeout

的

的
$timeout(function () { if (attrs.modalId == 'protocolModal') { element.find('#' + attrs.modalId).append('<div>this is a protocol test...</div>'); } else { element.find('#' + attrs.modalId).append('<div>this is a category test...</div>'); } }, 1000)

的

现在为什么 $ timeout 因为你正在应用模板而且同样如此时间你的链接功能附加你的div所以它不会应用你的div 。首先应用模板，然后在模板中附加你的div

如果你想在弹出内容中显示div，请使用此选择器。请参阅此示例：https://jsfiddle.net/kevalbhatt18/o76hxj69/6/

的

的
element.find('#'+attrs.modalId +' .modal-body').append('<div>this is a protocol test...</div>');

的

Answer 3

如果您的两个DOM结构不同，您可以考虑使用两个不同的模板，具体取决于某些参数值。

templateUrl can be specified as a function，例如：

angular.module('Joy', [])
    .controller('ProfileCtrl', ['$scope', function ($scope) {
    $scope.user = {
        name: 'Elit'
    };
}])
    .directive('profile', [function () {
    return {
        restrict: 'A',
        templateUrl: function (elem, attrs) {
            return 'style-' + attrs.color + '.html';
        }
    };
}]);

并将指令用作：

<div ng-app="Joy" id="play-ground" ng-controller="ProfileCtrl">
    <div profile color="red"></div>
    <div profile color="green"></div>
</div>

在这种情况下，如果color为red，则该指令将从style-red.html加载模板。否则来自style-green.html。

在您的情况下，您可能会在外部控制器中保留一个标志。单击任一按钮将更改此标志值并传入指令。该指令将相应地加载不同的模板。

在指令中使用链接函数来追加不同的HTML元素

3 个答案: