了解Angularjs中的$ scope mechanics

时间:2014-09-03 13:57:20

标签: angularjs angularjs-scope

我无法为自己澄清如何处理Angularjs中的$ scope。虽然我已经以其他方式解决了我当前的问题,但仍然需要帮助才能理解$ scope使用情况。

我有以下表格(本例简化)。的index.html:

<form class="form-horizontal" ng-controller="AddItemController as addItemCtrl">
  <fieldset>
    <legend>New item</legend>
    <div class="form-group">
      <label for="submittedBy" class="col-lg-2 control-label">Submitted by</label>
      <div class="col-lg-10">
        <input type="text" class="form-control" id="submittedBy" ng-model="addItemCtrl.item.submitted_by" placeholder="Your name here">
      </div>
    </div>
    <div class="form-group">
      <div class="col-lg-10 col-lg-offset-2">
        <!--button class="btn btn-default">Cancel</button-->
        <button type="submit" class="btn btn-primary" ng-click="addItemCtrl.addItem()">Submit</button>
      </div>
    </div>
  </fieldset>
</form>

app.js:

    app.controller("AddItemController", ['$scope','$http', function ($scope, $http) {
    $scope.item = {};

    this.addItem = function() {
        $http({
            url: "add_item",
            method: "GET",
            params: this.item
         }).
        success(function(data, status, headers, config) {
            var table = angular.element($("#body")).scope();
            table.items = data;
        });
        **this.item={};**
    }
}]);

我想要的只是从表单中获取数据,将其发送到服务器,获取响应,更新表,然后清除表单。最后一部分是我的问题。我目前正在使用this.item={}来处理它。但我确实想用$ scope调用它,所以它应该是$scope.item={}然后我想在addItem函数内移动它。不幸的是,它不适用于任何一种情况。

我有这个代码,它按预期工作,但似乎我很幸运/不幸在没有理解机制的情况下完成它。

app.controller('ItemController', ['$scope','$http', function ($scope, $http) {
    function getItems(){
        $http({
                url: "get_items",
                method: "GET"
             }).
            success(function(data, status, headers, config) {
                $scope.items = data;
            });
    }
    getItems();
}]);`

更新。这就是我的AddItemController目前的样子:

app.controller("AddItemController", ['$scope','$http', function ($scope, $http) {
    $scope.item = {};

    this.addItem = function() {
        $http({
            url: "add_item",
            method: "GET",
            params: this.item
         }).
        success(function(data, status, headers, config) {
            $scope.$$prevSibling.items = data;
            $scope.addItemCtrl.item={};
        });
    }
}]);

它的工作方式就像我想要的那样。但我不喜欢$scope.$$prevSibling.items = data;语句,我用它来刷新由ItemController处理的表,有更优雅的方法吗?

1 个答案:

答案 0 :(得分:2)

你不必编写getItem函数,你可以只编写$ http代码,它只会工作正常,大约$ scope,只是不要使用它,这里有点棘手,你想要的所有变量使用$ scope进行制作并从$ scope获取它

   $scope.item;
   $scope.item.getItem = function(){};
   var item1 = $scope.item;

等等。