Question

我正在制作一个自定义指令。这就是我所拥有的：

<button myDirective>Click Me</button>

我的指示如下：

return {
  restrict: 'EA',
  controller: 'Controller',
  replace: false,
  template: '<h3>Test</h3>', // actually more complex
  link: function( $scope, $element, $attrs ) {
    $element.on( 'click', function() {
      // code, that shows the template
    });
  }
};

结果是：

<button myDirective>Click Me
  <h3>Test</h3>
</button>

但我希望有这样的东西：

<button myDirective>Click Me</button>
<h3>Test</h3> <!-- just shown after button is clicked -->

单击按钮后，模板应显示在按钮后面。

谢谢。

Answer 1

我建议在指令模板中渲染按钮。这是一个示例代码段：

angular.module('myApp', [])
  .directive('expander', function() {
    return {
      restrict: 'EA',
      replace: true,
      template: '<div><button ng-click="showContent=true">{{buttonText}}</button><h3 ng-show="showContent">Test</h3></div>',
      link: function( $scope, $element, $attrs ) {
        $scope.buttonText = $attrs.text;
      }
    }
  });

<html ng-app="myApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
  </head>
  <body>
    <expander text="Press me"></expander>
  </body>
</html>

Answer 2

您可以使用jqLite的.after()在附加指令的任何元素之后附加内容，然后在点击时隐藏并显示内容。

查看：

<button my-directive>Click Me!</button>

指令：

return {
  restrict: 'EA',
  scope: {
    time: '='
  },
  link: function($scope, $element){
    var afterStuff = angular.element('<h3 style="display:none;">Test</h3>');

    $element.after(afterStuff);
    //full jquery version
    $element.on('click', function(){
      afterStuff.toggle();
    });
  }
}

JSBin：https://jsbin.com/xuwuhu/edit?html,js,output

Answer 3

您可以使用ngif或ngshow在按钮处理程序中提起标记后显示内容。

单击此单元后，在另一个元素后插入指令模板

3 个答案:

查看：

指令：