是否可以在 ng-click 上调用组件？答案

【问题标题】：Is it possible to invoke a component on ng-click?是否可以在 ng-click 上调用组件？
【发布时间】：2017-03-10 16:31:21
【问题描述】：

以前有一个<div>，我在ng-click 上切换其内容。使用 Angular 1.5 中的组件，我移动了 <div> 的内容并创建了一个 component。我现在想在ng-click 上加载这个component。

这可能吗？

我还没有找到任何帮助。如果可能的话，帮助将是巨大的。

【问题讨论】：

能不能再扩展一点？

标签： angularjs angularjs-directive angularjs-ng-click angularjs-components angularjs-1.5

【解决方案1】：

可以显示/隐藏组件（包含您的 div 内容）。我已经创建了一个 plnkr，参考下面的代码和 plnkr 链接

https://plnkr.co/edit/sZSfslXTDGfvGwiDdBSZ?p=preview

HTML：

<!DOCTYPE html>
<html ng-app="componentApp">

  <head>
    <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="componentController">
    <button ng-click="showComponent()" id="changeText">Show Component</button>
    <div-content ng-if="isShowContent"></div-content>
  </body>

</html>

JS：

angular.module("componentApp", [])
       .controller("componentController", function($scope) {
         $scope.isShowContent = false;
         $scope.showComponent = function() {
           $scope.isShowContent = !$scope.isShowContent;
           document.getElementById("changeText").innerHTML = $scope.isShowContent ? "Hide Component" : "Show Component";
         };
       })
       .component("divContent", {
         template: "This is the content of my div"
       });

【讨论】：