Question

在将控制器中的对象绑定到$ scope之后，我遇到了一个奇怪的问题，对象的任何进一步更改都没有反映在视图中。

这是我的代码：

查看：

<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;
}

第一次单击时输入仅清除一次，之后 - 单击clear元素不执行任何操作。我尝试用$ scope包装更改。$ apply（）如下：

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

但是这种变化仍未在观点中反映出来。我知道我可以对$ scope的变量进行更改，但是为什么要使用双向绑定开始？

我的问题是：将控制器的变量绑定到范围和放大器的正确方法是什么？将控制器中所做的更改反映在视图中？

Answer 1

问题是由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代码更快：）

AngularJS v1.3.13：控制器中的数据更改未反映在视图中

1 个答案: