NgHide AngularJs - PullRequest
Новая
       20

NgHide AngularJs

0 голосов
/ 12 ноября 2018

Я просто пытаюсь понять что-то очень простое.

Я хочу использовать ngHide с AngularJs для отображения элемента, когда я нажимаю на слово (см. Ссылку ниже). 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>

1 Ответ

0 голосов
/ 13 ноября 2018

При написании углового кода на одной html-странице вы должны включить исходный код 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>
...