使用指令中的链接功能添加不同的HTML元素

Question

Fiddle

我有两个按钮。当按下时，它显示一个模式，带有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的范围，所以让我们使用它。

此外，而不是靠不住.find通过ID，注入的元素作为模板的占位符和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即：模式-ID =“{{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(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) 

现在为什么$超时，因为你申请模板，并在同一时间 你的链接功能附加到您的股利，这样就不会套用您的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结构diverses，您可以考虑使用取决于两个不同的模板对某些参数值。

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。

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