Question

当我按下按钮时，会出现一个模态。在那个模式我有一个 <template-placeholder></template-placeholder>

点击该按钮后，我会if-check确认它是否是正确的按钮。如果是 - 那么添加另一个指令而不是placeholder。

但是我无法让它发挥作用。

这是我的指示：

.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">',
                        '<template-placeholder></template-placeholder>',
                        '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>',
                        '</div>',
                        '</div>', 
                        '</div>',
                        '</div>'].join(''),
        link: function(scope, element, attrs) {
            scope.$watch('modalId', function(val){
                if(val == 'protocolModal'){
                    element.find('template-placeholder').replaceWith('<test-directive></test-directive>');
                }
            });
        }
    }
})

.directive('testDirective', function(){
    return {
        restrict: 'E', 
        template: '<div>this is our other directive speaking.</div>'
    }
});

Answer 1

您需要使用.directive('modalDirective', ['$compile', function($compile){ ... link: function(scope, element, attrs) { scope.$watch('modalId', function(val){ if(val == 'protocolModal'){ element.find('template-placeholder').replaceWith($compile('<test-directive></test-directive>')(scope)); } }); } }])：

public static IObjectType ConvertJsonToClass(string jsonString)
{
  IObjectType obj;
  try{
    obj = JsonConvert.DeserializeObject<Person>(jsonString);
  }
  catch{
    try{
      obj = JsonConvert.DeserializeObject<Bird>(jsonString);
    }
    catch{ obj = null; }
  }
  return obj;
}

更新的小提琴：https://jsfiddle.net/L0jns64m/3/

Answer 2

为什么要关注modalId？你可以使用ng-if：

'<div class="modal-footer">',
'<test-directive data-ng-if="modalId == \'protocolModal\'"></test-directive>',
'<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>',
'</div>',

以下是工作的小提琴：http://jsfiddle.net/aL0er9rv/

Answer 3

将模板占位符替换为

content://com.google.android.apps.photos.contentprovider/url
content://com.google.android.apps.photos.content/url
content://com.android.gallery3d.provider/picasa/item/numbers
...

ng-if将为您处理编译和销毁。这很不错。

从angularJS中的另一个指令向html添加指令

3 个答案: