Связывание с примитивным значением на контроллере

Question

Я пытаюсь связать с логической переменной в области моего контроллера, чтобы указать, должна ли отображаться анимация загрузки. Однако следующий код не работает. Выполняется функция внутри $timeout, но представление не обновляется.

Когда я проверяю область применения с помощью хромированного углового удлинения, я вижу, что ctrl.loading является true.

Это из-за булевых элементов, являющихся типами значений в javascript, в отличие от ссылочных типов?

Я предполагаю, что представление буквально обязательное для true, а не для местоположения логического значения, которое изменилось бы.

Как получить представление для привязки к переменной, а не к значению, исходная переменная изначально?

контроллер:

function TestController($scope,$timeout){ 
    "use strict"; 

    var loading=true; 

    $timeout(function(){ 
     loading=false; 
    }, 1000); 

    return { 
     loading:loading 
    } 

} 

шаблон:

<div> 
    <h1 ng-show="ctrl.loading">Loading</h1> 
    <h1 ng-hide="ctrl.loading">Not Loading</h1> 
</div> 

abovecode это всего лишь пример, на самом деле я бы установить значение после того, как запрос прибудет wqas вернулся.

$http.get().then(function() { 
    loading=false; 
}, function() { 
    loading=false; 
}) 

, но эффект такой же.

Answer 1

Вы неверно связываете переменную loading. Вам необходимо либо зарегистрировать эту переменную loading на $scope, либо на переменную this. См ниже рабочий пример:

var app = angular.module("sa", []); 
 

 
app.controller("TestController", TestController); 
 

 
function TestController($scope, $timeout) { 
 
    "use strict"; 
 
    var vm = this; 
 

 
    vm.loading = true; 
 

 
    $timeout(function() { 
 
    vm.loading = false; 
 
    }, 2000); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 

 
<div ng-app="sa" ng-controller="TestController as ctrl"> 
 
    <h1 ng-show="ctrl.loading">Loading</h1> 
 
    <h1 ng-hide="ctrl.loading">Not Loading</h1> 
 
</div>

Кроме того, обратный блок в контроллер не имеет смысла.

Редактировать

Теперь я понимаю ваш вопрос. Это первый раз, когда я увидел эту функцию возврата с контроллера. Через полчаса исследования я узнал, что вы не можете ожидать, что примитивный тип будет передаваться по ссылке в Javascript. Вам нужно использовать какой-то объект.

См проблему сфера наследования, чтобы получить суть: https://github.com/angular/angular.js/wiki/Understanding-Scopes

Чтобы это исправить, вы можете изменить свой код, как показано ниже:

var app = angular.module("sa", []); 
 

 
app.controller("TestController", TestController); 
 

 
function TestController($scope, $timeout) { 
 
    "use strict"; 
 
    var myData = {}; 
 

 
    myData.loading = true; 
 

 
    $timeout(function() { 
 
    myData.loading = false; 
 
    }, 2000); 
 

 
    return { 
 
    myData: myData 
 
    }; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="sa" ng-controller="TestController as ctrl"> 
 
    <h1 ng-show="ctrl.myData.loading">Loading</h1> 
 
    <h1 ng-hide="ctrl.myData.loading">Not Loading</h1> 
 
</div>