Question

我试图调用一个html页面，当我点击一个按钮时，我的指令的templateUrl中给出了一个html页面，下面是我的代码“hi”应该在我点击“click me”按钮时显示。请建议我如何做到这一点。

sample.html：

<div ng-controller="MyController">
    <button custom-click="">Click Me</button>
</div>

sample.js：

appRoot.directive('customClick', function() {
    return {
        link: function(scope, element, attrs) {
          element.click(function(){
           templateUrl:'/page.html';
          }); 
        }
    }
});

page.html中：

<div><h4>HI</h4></div>

Answer 1

更新：已更新代码段以获取来自网址的代码

添加上述答案：

appRoot.directive('customClick', function($http, $compile) {
    return {
        link: function(scope, element, attrs) {
                element.click(function(){
                    $http.get("/page.html").then(function(resp){
                        $(element).html(resp.data);
                        var fnLink = $compile(element);
                        fnLink($scope);
                    });
                }); 
            }
        }
});

P.S：需要使用jQuery（）运行jQuery，如果你不想包含jQuery，可以绕过这些函数

Answer 2

根本不认为结构是可能的。

最简单的方法是在指令上处理显示/隐藏类型的功能，并始终使用模板。

为此，您可以使用ng-show，ng-hide或ng-if（以及其他一些我不会深入研究的内容）。

base directive

appRoot.directive('customClick', function () {
  return {
    template: '<div><h5>HI</h5></div>',
    link: function (scope, el, attrs) {
      scope.active = false;

      el.on('click', function () {
        scope.$apply(function () {
          scope.active = !scope.active;            
        });
      });
    }
  }
});

ng-show

template: '<div ng-show="active"><h5>HI</h5></div>'

ng-hide

template: '<div ng-hide="!active"><h5>HI</h5></div>'

ng-if

template: '<div ng-if="active"><h5>HI</h5></div>'

编辑：如果您使用的是templateUrl，只需将ng-show / hide / if指令放在被引用模板的根元素上，这应该是相同的。

哦，这是一个小提琴。

http://jsfiddle.net/ADukg/5426/

如何使用AngularJS在按钮单击时调用自定义指令模板URL

2 个答案: