Question

我通过互联网研究了这个流行的错误，我找不到解决问题的方法。

我所拥有的是一个jQuery iframe post消息函数，它接收来自不同域的字符串。当它获得字符串时，它需要将它存储到Angular并保存到数据库。我遇到的麻烦是，尝试更新角度以识别变化。

所以这是我的代码：

.controller('jobOrderController', function(Jobs, socketio) {
    var vm = this;
    var myImage;
    $.receiveMessage(
            function(e) {
                myImage = e.data;
                vm.$apply(function() {
                    vm.orderData.guideImage = e.data
                });
            },
            'http://aaa.com'
        );

    vm.createOrders = function() {
        vm.message = '';
        Jobs.createOrders(vm.orderData)
            .success(function(data) {
                vm.orderData = '';
                vm.message = data.message;
            });
    };

})

$.receiveMessage将侦听传入的字符串数据，然后在收到它时应将其保存到我的“controller，vm”。我知道我的消息正在收到，因为我可以提醒他们。我知道我错了，但我读到的一切都是使用$scope.apply，所以我认为使用“this”会有同样的效果。但它似乎没有更新到角度。

Answer 1

我发现您使用john papa's guideline来避免使用$scope。你只是忘了在控制器的开头声明vm（代表viewmodel）：

var vm = this;

编辑：指南也说：

＆＃34;仅在需要时考虑在控制器中使用$ scope。例如使用$ emit，$ broadcast或者发布和订阅事件时 $对＆＃34;

对于$apply，您还需要明确使用$scope.$apply

Answer 2

你可以这样做：

.controller('jobOrderController', function($scope, Jobs, socketio) {
   var vm = this;

   $.receiveMessage(
        function(e) {
            myImage = e.data;
            $scope.$apply(function() {
                vm.orderData.guideImage = e.data
            });
        },
        'http://aaa.com'
    );

});

this在Angular控制器内的工作方式不同。它并不总是与$scope相同，而$scope是包含$apply方法的对象。

Answer 3

对于$apply，您无法使用this。 $scope和this是不同的实例，因此this无法访问$apply。

检查代码段：

＆＃13;

angular.module('myApp', []).controller('MyCtrl', function($scope) {
  var vm = this;
  setTimeout(function() {
    $scope.$apply(function() {
      vm.text = 'Submit';
    });
  }, 0);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl as ctrl">
  <button>{{ctrl.text}}</button>
</div>

＆＃13;

Answer 4

controllerAs语法只是$scope.foo的当前糖（如果您的controllerAs设置为foo）。因此，在此实例中this 实际上指向$scope.foo而不是$scope，这就是为什么您将无法调用任何$scope通过this的行动。要使用其中任何一种，您必须明确使用$scope。

以上答案都回答了如何解决短期问题的解决方案，即您在控制器中使用$scope.$apply。

老实说，这里的问题并不是你不能使用$scope.$apply - 我不确定你想要做什么，但Angular的主要规则之一就是你必须做所有事情通过Angular; $.receiveMessage肯定是不 Angular。将您的$.receiveMessage包裹到服务中;该服务还应该处理$scope.$apply。这将有助于减少代码重复，并使您的控制器与服务的实现无关。

可能已经有一个存在的库可以避免使用jQuery的大量需求。

无法读取未定义的属性'$ apply'

4 个答案: