Maks00088
@Maks00088
Обучаюсь Java/JavaEE /Php/Js

Как правильно использовать $scope в ангуляре?

По идее должно вывести > 12 , получаю неправильный вывод , кто объяснит в чём дело ?
Тестирую с ангуляром , как начинающий !
<body>
<div ng-controller="MaksController">
    <h1>Hello from angular! </h1>
    <p ng-if="controller > 12">Controller > 12</p> 
    <p ng-if="controller > 20">Controller > 20</p>
    <p>The controller value is: {{controller}}</p>
</div>
<script>
    var module = angular.modules("myApp",[]);
    module.controller("MaksController",controllerFunction);
    function controllerFunction($scope) {
       $scope.controller = 15;
       console.log("Maks Controller called! ");
    }
</script>
</body>


fdbf14bea91e4fd58400a8ee9fbfbb84.jpg
  • Вопрос задан
  • 230 просмотров
Решения вопроса 1
zoonman
@zoonman
⋆⋆⋆⋆⋆
У вас были следующие ошибки
  1. неправильно задекларировано приложение (ng-app)
  2. modules вместо module


Исправленный вариант plnkr.co/edit/hJVCAByn7ncyAmao9pKI?p=info

ng-app is not allowed here - это стандартное предупреждение валидатора HTML. Это нормально.

Вместо ng-if лучше использовать ng-show, т.к. это более производительная операция.

DOM трансформация занимает более значительное время, чем просто смена класса.
Применяйте ng-if только тогда, когда вам критически необходимо изменить DOM-структуру документа.
Например, у вас есть некая несовместимая библиотека, которой обязательно нужно работать с id="abc". Обычно это какой-нибудь сторонний сервис, которому необходимо манипулировать DOM и нем жестко захардкоден id="abc":
<div ng-if="switchA"><div id="abc">A</div></div>
<div ng-if="switchB"><div id="abc">B</div></div>


ng-show может негативно влиять на производительность в случае, когда у вас внутри имеется множется дочерних компонентов и контроллеров, т.к. в них добавлены обсерверы и т.д. То есть в случае сложной вложенной структуры с ng-model или ng-bind и т.п. лучше использовать ng-if. Это поможет сохранит память.
В случае простых вложенных структур ng-show будет производительнее.

Например для такого варианта лучше использовать ng-show:
<div ng-repeat="user in users">
  {{user.name}}
  <div ng-show="user.isStar">*</div>
</div>


Но
<div ng-repeat="user in users">
  {{user.name}}
  <div ng-if="user.isStar"><custom-star-component user="user"></custom-star-component></div>
</div>
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
sHinE
@sHinE
веб-разработчик, php/js/mysql и сопутствующее
В консоли ваше сообщение Maks Controller called! выводится?
Я точно не помню, в каком случае приложение само бутстрапится, возможно надо ng-app директиву на body повесить или вручную метод bootstrap запустить.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы