AngularJS v1.3.13: Изменение данных в контроллере не отражается в представлении

У меня возникает странная проблема, после того как я привяжу объект в контроллере к области $ scope, любые дальнейшие изменения объекта не будут отражено в представлении.AngularJS v1.3.13: Изменение данных в контроллере не отражается в представлении

вот мой код:

Вид:

<input id="search-input" type="text" ng-model="model.keywords" /> 
<span class="tool" ng-click="methods.clearInput()"></span>

Контроллер:

angular.module('app').controller('someController', function($scope) { 
    var model = { 
     keywords: '' 
    }; 
    var methods = { 
     clearInput: function() { 
     model.keywords = ''; 
     } 
    }; 
    $scope.model = model; 
    $scope.methods = methods; 
}

вход очищается только один раз на первый щелчок, после этого - нажав на четкий элемент делает ничего. Я попытался обертывание изменения с $ объемом $ применяется() следующим образом:.

clearInput: function() { 
    $scope.$apply(function() { 
     model.keywords = ''; 
    }); 
}

Но изменения все еще не отражены в представлении. Я знаю, что могу внести изменения в переменную $ scope, но зачем использовать двустороннюю привязку для начала?

Мой вопрос: как правильно связать переменные контроллера с областью & есть изменения, внесенные в контроллер, отраженные в представлении?

источник

2016-02-21 Ohad Ben Nun

Я не понимаю эту проблему. У меня нет проблем с запуском вашего кода. Что вы меняете в контроллере, который не отображается в представлении? Используя свой код, всякий раз, когда я ввожу текст, и нажимаю элемент span/run 'clearInput()', он очищает следующий (а не только в первый раз). –

Вы правы. проблема была в селекторе CSS –

Проблема была вызвана селектором CSS. попробуйте это:

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
    <style> 
     input:not(:focus) + span { 
      display: none; 
     } 
    </style> 
</head> 
<body> 
<input id="input" type="text" /> 
<span id="span">woop</span> 

<script> 
    var input = document.getElementById("input"); 
    var span = document.getElementById("span"); 

    span.addEventListener("click", function() { 
     alert("was clicked!"); 
    }); 
</script> 
</body> 
</html>

Я предполагаю его, потому что браузер делает CSS быстрее, чем код JavaScript вызывается :)

источник

2016-02-21 17:10:51

AngularJS v1.3.13: Изменение данных в контроллере не отражается в представлении

ответ

Смежные вопросы