Question

我想在这里做的主要是：

提交表单后，将完成http get请求（VerbController）
成功时，返回JSON字符串
我将JSON字符串复制到工厂对象（称为VerbFactory）
我想通过另一个控制器（OutputController）在div中输出JSON字符串的内容，我接受了属性＆＃34; name＆＃34;在这里作为一个例子。

为实现这一点（第4点），我观察了VerbFactory对象的更改，并且在请求后的JSON字符串被加载到对象中时，我想将它存储在OutputController的变量中，以便我可以制作我的HTML中的表达式。

但它现在不起作用。似乎 this.verb 在另一个范围内，而不是控制器范围。我很难理解 $ scope 和 this 之间的区别，尽管我已经阅读了大量有关这两者之间差异的文章。

我该如何解决这个问题？我会错过一些明显的东西吗？

注意：我添加了一些jQuery，它将属性＆＃34; name＆＃34;将JSON放入调试div中，它按预期工作。但是AngularJS表达式 {[{outputCtrl.verb [＆＃34; @ attributes＆＃34;] [＆＃34; name＆＃34;]}]} 不起作用。

HTML：

<div class="container">
  <div class="row">
    <div id="debug" class="col-xs-12 col-sm-12">
    </div>
    <div class="col-xs-12 col-sm-12" ng-controller="OutputController as outputCtrl">
      {[{outputCtrl.test}]}
      {[{outputCtrl.verb["@attributes"]["name"]}]}
    </div>
  </div>
</div>

JS：

(function() {
    var app = angular.module('LG', []).config(function($interpolateProvider){
      $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
    });

    app.factory("VerbFactory", function(){
      var json = {};
      var available = false;

      return {
        getJSON: function() {
          return json;
        },
        setJSON: function(newObj) {
          angular.copy(newObj, json);
          available = true;
        },
        isAvail: function() {
          return available;
        },
        resetAvail: function() {
          available = false;
        }
      };

    });

    app.controller("VerbController", ['$http', 'VerbFactory', function($http, VerbFactory){

      this.verb = "";

      this.requestVerb = function() {
        VerbFactory.resetAvail();
        var that = this;

        $http.get('/request/' + that.verb).
          success(function(data) {

            VerbFactory.setJSON(data);

          }).
          error(function() {

          });

        this.verb = "";
      };

    }]);

    app.controller("OutputController", ['$scope', 'VerbFactory', function($scope, VerbFactory){

      this.test = "Test!";
      $scope.$watch(VerbFactory.isAvail, function(){
        this.verb = VerbFactory.getJSON();
        $('#debug').append('<p>'+ this.verb["@attributes"]["name"] +'</p>');
      });



    }]);

  })();

Answer 1

$ scope内部的

this。$ watch回调是指回调范围，而不是OutputController的外部范围。使用var self = this来引用OutputController。

ControllerAs语法

OutputController.js

var self = this
$scope.$watch(VerbFactory.isAvail, function(){
  self.verb = VerbFactory.getJSON();
  //etc
});

常规控制器语法

OutputController.js

$scope.$watch(VerbFactory.isAvail, function() {
  $scope.verb = VerbFactory.getJSON();
  //etc
});

AngularJS：在$ watch之后动态更改表达式

1 个答案: