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

输入端上的第一次点击清除只有一次，在那之后 - 点击明确的元素呢没有。我尝试用$ scope封装更改$ apply（）像这样：

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

但是这种改变仍然没有反映在视图中。我知道我可以对$ scope的变量进行更改，但是为什么要使用双向绑定呢？

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

来源

2016-02-21 Ohad Ben Nun

我不明白的问题更快。我没有麻烦运行你的代码。你在控制器中发生了什么变化，但没有反映在视图中？使用你的代码，每当我输入文本，然后单击span元素/运行'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：控制器中的数据更改没有反映在视图中

回答

相关问题