this против $ scope в AngularJS, 'this' демонстрирует своеобразное поведение с помощью ng-if - PullRequest
Новая
       2

this против $ scope в AngularJS, 'this' демонстрирует своеобразное поведение с помощью ng-if

1 голос
/ 04 июля 2019

У меня есть следующий контроллер и представление в AngularJS, и я пытаюсь понять разницу между этим и $ scope.

// index.js 

angular.module('angularApp', [])
  .controller('indexCtrl', ($scope)=>{
   // Initialize variables
   $scope.name1 = '';
   this.name2 = '';
   $scope.greeting1 = `Hello ${$scope.name1}`;
   this.greeting2 = `Hi ${this.name2}`;
  })

// index.html 

<!doctype html>
<html ng-app="angularApp">
 <head>
  <script   src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
<script src="index.js"></script>
 </head>
 <body>
  <div ng-controller="indexCtrl as app">
   <input
    type="text"
    ng-model="name1"
    placeholder="Using $scope variable name"
   />
   <br />
   <input
    type="text"
    ng-model="app.name2"
    placeholder="Using this variable name"
   />
   <br /><br />
   <h2 ng-if="name1 != ''"> Hello {{name1}} </h2>
   <br />
   <h2 ng-if="app.name2 != ''"> Hi {{app.name2}} </h2>
  </div>
 </body>
</html>

В идеале, когда я впервые запускаю localhost, он не должен показывать текст «Hello» или «Hi» из-за ng-if. Пока «Hello» не отображается, отображается «Hi». Почему это происходит?

Ответы [ 2 ]

0 голосов
/ 04 июля 2019

$ scope

Область действия - это связующая часть между HTML (представление) и JavaScript (контроллер).

Область действия - это объект с доступнымсвойства и методы.Он используется для получения всех элементов управления в файлах controller.js.

Область доступна как для вида, так и для контроллера.

this

Когда вызывается функция конструктора контроллера, это контроллер.

В функциях, определенных в $ scope, для него устанавливается значение $ scope, где / когда функция была вызвана ". 

<!doctype html>
        <html ng-app="angularApp">
         <head>
          <script   src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
        <script src="index.js"></script>
         </head>
         <body>
          <div ng-controller="indexCtrl as app">
           <input
            type="text"
            ng-model="name1"
            placeholder="Using $scope variable name"
           />
           <br />
           <input
            type="text"
            ng-model="app.name2"
            placeholder="Using this variable name"
           />
           <br /><br />
           <h2 ng-if="name1 != ''"> Hello {{name1}} </h2>
           <br />
           <h2 ng-if="app.name2 != ''"> Hi {{app.name2}} </h2>
          </div>
         </body>
        </html>
    <script>
    angular.module('angularApp', [])
      .controller('indexCtrl', ($scope)=>{
       // Initialize variables
       $scope.name1 = '';
       this.name2 = '';
       $scope.greeting1 = `Hello ${$scope.name1}`;
       this.greeting2 = `Hi ${this.name2}`;
      })
    </script>
0 голосов
/ 04 июля 2019

В контроллере вы устанавливаете this.name2=''; В этом случае this не включен $scope. Так app.name2! = '', Это равно undefined. Обычно считается, что лучше не использовать $scope напрямую, а использовать синтаксис ControllerAs (см. это объяснение ).

$scope - это просто объект JavaScript, как и любой другой, но это неявная область действия всего, на что ссылается шаблон. Поэтому, если у вас есть что-то вроде ng-if="name2 == ''", name2 ссылается на поле в $ scope.

Когда вы используете ControllerAs, он создает объект в $ scope с таким именем ($scope.app в вашем случае). $scope.app соответствует this контроллера. Это точно так же, как если бы вы поместили $scope.app = this; в JavaScript контроллера. Итак, в контроллере вы можете установить this.name2='Harry' и в HTML иметь: 

<span> Hi {{app.name2}} </span>

И вы увидите Hi Harry.

Однако , вы не должны использовать функцию стрелки для определения вашего контроллера, так как функции стрелки не имеют своей собственной области this, а наследуют ее от своего родителя. Когда вы определяете функции на контроллере, используйте this.myFunc = () => {...} и обращайтесь к нему в HTML с помощью app.myFunc, но при определении самого контроллера используйте обычный function синтаксис.

Чтобы упростить задачу, вместо использования app в HTML и this в контроллере, будет хорошей идеей использовать одно и то же имя, присваивая this переменной. Обычно люди используют vm (для View Model). Таким образом, у вас будет ControllerAs='vm', а затем в JavaScript установите let vm = this; в верхней части кода вашего контроллера.

Затем вы можете ссылаться на vm.name2 (например) в и ваш HTML и ваш JavaScript.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...