如何在angularjs中将子控制器的模型值设置为父控制器中的模型

时间:2014-12-06 06:37:14

标签: angularjs angularjs-scope

我被困在一个应用程序中,我有一个包含用于输入expense_id值和金额的输入字段的表。 amount元素绑定到自定义指令,通过按ctrl + enter将添加一个包含空字段的新tr。现在提交时我无法计算所有金额字段的总量。这是标记

<table class="table table-bordered table-hover table-condensed">
                        <tr class="info" style="font-weight: bold">
                            <td>EXPENCE TYPE</td>
                            <td>AMT</td>
                        </tr>
                        <tr ng-repeat="expense in expenceentry">
                            <td>
                                <!-- editable username (text with validation) --> <span
                                editable-text="expense.expensetype_id"
                                ng-model="expense.expensetype_id"
                                e-name="expense.expensetype_id" e-form="expenceentryform"
                                e-required
                                e-typeahead="expense.expensetype_id as expense.expensetype_name for expense in expensetypes.record">
                            </span>
                            </td>
                            <td ng-controller="MyCtrl">
                                <input type="number" ng-model="expense.amount" on-keyup-fn="handleKeypress">
                            </td>
                        </tr>
                    </table>

,MyCtrl的控制器是:

function MyCtrl($scope) {
    $scope.keylog = [];
    $scope.keyCount= 0;
    var len;
    //$scope.expense.amount="100";
    // $scope.$parent.test=$scope.expense.amount;    

    $scope.handleKeypress = function(key) {
        $scope.keylog.push(key);
        if($scope.keylog[len-1]==17 && $scope.keylog[len]==13)
            $scope.addUser();
          len=$scope.keylog.length;
    }
}

自定义指令

app.directive('onKeyup', function() {
return function(scope, elm, attrs) {
    function applyKeyup() {
      scope.$apply(attrs.onKeyup);
    };           

    var allowedKeys = scope.$eval(attrs.keys);
    elm.bind('keyup', function(evt) {
        //if no key restriction specified, always fire
        if (!allowedKeys || allowedKeys.length == 0) {
            applyKeyup();
        } else {
            angular.forEach(allowedKeys, function(key) {
                if (key == evt.which) {
                    applyKeyup();
                }
            });
        }
    });
};

});

父控制器是:

function expenseEntry($scope, $filter, $http,expense_type,expenseinsert,employee) {
    $scope.total="0.00";
      $scope.deliveryboys =employee.get();



     $scope.update=function(){
        // $scope.action="Add";
       var ret=expenseinsert.save($scope.expense);
       alert("Data inserted..!!!");
    };

    $scope.expensetypes=expense_type.get();

    $scope.addUser = function() {
        $scope.inserted = {
          expensetype_id:'',
          amount: null 
        };

        $scope.expenceentry.push($scope.inserted);

      };
      $scope.expenceentry = [
        {expensetype_id: '', amount: ''}

      ]; 

};

1 个答案:

答案 0 :(得分:0)

您的代码非常混乱,因为它不清楚您实际需要哪些信息。

但无论如何,根据你帖子的标题。您可以使用

访问直接父控制器范围
$scope.$parent.varName;

如果它不是直接父级而您不使用$ parent,则可以依赖范围的继承。子范围应该可以访问父范围,除非它被声明为隔离范围。请注意使用基元而不是对象进行数据绑定。

很好的资源将是javascript-prototypal-inheritance