Question

我只是想了解一些非常简单的内容。

当我单击一个单词时，我想在AngularJs中使用ngHide来显示元素（请参见下面的链接）。 JsFiddle Link

在链接上，我想做的工作正常，但是问题是，当我在单个页面上将其适应我的AngularJs项目时，代码无法执行。但是我将javascript放在了标签之间（下面的代码）。

<div ng-controller="theCtrl">

  <div id="callFunction" ng-click="myFunction()">content here</div>
  <div id="contactInfo" ng-show="showContent">content here</div>

</div>

<script type="text/javascript">
  angular.module('appName', [])
    .controller('theCtrl', ['$scope', function($scope) {
      $scope.showContent = false;

      $scope.myFunction = function() {
        $scope.showContent = !$scope.showContent;
      }
    }]);

  angular.element(document).ready(function() {
    angular.bootstrap(document, ['appName']);
  });
</script>

Answer 1

在单个html页面上编写角度代码时，应在script标签中包含angular.min.js源代码。在下面输入工作代码：

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-controller="theCtrl">

  <div id="callFunction" ng-click="myFunction()">content here</div>
  <div id="contactInfo" ng-show="showContent">content here</div>

</div>

<script type="text/javascript">
  angular.module('appName', [])
    .controller('theCtrl', ['$scope', function($scope) {
      $scope.showContent = false;

      $scope.myFunction = function() {
        $scope.showContent = !$scope.showContent;
      }
    }]);

  angular.element(document).ready(function() {
    angular.bootstrap(document, ['appName']);
  });
</script>
</html>

NgHide AngularJs

1 个答案: