Question

我的HTML中有以下内容：

<body ng-controller = "Control as control">
<button ng-click = "control.prepareAction()">Do Action </button>
<div id="one" ng-hide = "!control.showOne" >
    <div>
      <h6> {{control.name}}</h6>
      <p> Bills Sponsored: {{control.count}} <p>
  </div>

</body>

在我的Javascript中：

var vm = this;
vm.name = "My Name"
vm.prepareAction = function(){
  action(parseFirst(), parseLast()); //The two parse functions simply get values from an HTML form. This works correctly.
}
function action(first, last) {

      $.post('php/one.php', {
          first: first,
          last: last
        },
        function(data) {
          create(JSON.parse(data));
        });
      return values;
      }

    function create(data) {
      var countArray = data[0];
      vm.count = countArray[0];
      vm.showOne = true;
    }

此功能不会更新showOne（div总是隐藏）或count（在我将ng-hide设置为false时为空）的值。但是，当我将ng-hide设置为false时，它会正确显示名称。这让我认为这是一个范围问题，但是，当我将vm的值打印到控制台时，showOne和count的值是正确的。这可以通过Chrome ng-inspector Extension进行确认。

Answer 1

实际上你正在使用$ .post，它位于角度js的上下文之外，因此从create方法中，摘要周期正常工作。所以要解决它有两个选择。

要么使用

而不是$ .post

$http({
  method: 'POST',
  url: 'php/one.php'
}).then(function successCallback(response) {
   create(JSON.parse(response));
}, function errorCallback(response) {
});

或者您需要稍微修改一下

function create(data) {
  var countArray = data[0];
  vm.count = countArray[0];
  vm.showOne = true;
  $scope.$apply();
}

在这两种情况下你需要注入$ http＆amp;因此，控制器中的$ scope。

Answer 2

尝试将更新功能添加到vm。

vm.action = action;

如果你不这样做，就不能在闭包之外调用它（即在你的html中）。

Angular JS控制器 - 范围问题（可能）

2 个答案: