Question

我有一个应用程序，其代码如下：

<div class="step-tab" id="tab_2" ng-class="{'step--active': step == 2}" ng-controller="eventCatCtrl">
    <div ng-if="step == 2" ng-include="'include/step2.php'"></div>
</div>

在我的step2.php文件中，我有：

<div class="form-group">
    <label for="catTitle">Category Title <span>*</span></label><input type="text" class="form-control" id="catTitle" ng-model="catTitle" placeholder="Please enter your Category Title">
</div>
<div class="form-group">
    <label for="catDes">Category Description</label><textarea name="" class="form-control" id="catDes" placeholder="Enter a description here" ng-model="catDes" id="" cols="10" rows="6"></textarea>
</div>
<div class="form-group">
    <input ng-click="catValues(catTitle, catDes, $event)" type="button" class="btn btn-default" value="Add Category">
</div>

我已经触发了函数catValues并执行了：

eventApp.controller("eventCatCtrl", function($scope){
    $scope.catValues = function(catTitle, catDes, $event){
        $scope.catTitle = null;
        $scope.catDes = null;       
    }
});

然而null并不起作用，我在该控制器和函数中的许多其他东西也能很好地工作，但只有这个null不起作用。

如果我在ng-controller="eventCatCtrl"文件中包含step2.php，则null将起作用。

我想知道为什么null不会清除catTitle和catDes的值，为什么其他一切都不能正常工作。

Answer 1

那是因为ng-include创建了一个单独的范围，因此在id="tab_2"中有eventCatCtrl，因此eventCatCtrl控制器的范围是创建范围的父范围ng-include，所以如果您尝试分配null，它会检查eventCatCtrl的范围，它无法查看ng-include的范围，这就是为什么它不会分配null 1}}用于ng-include个模型。

在你的情况下实现这一点你可以在ng-include中的eventCatCtrl模板中定义模型，如下所示，

eventApp.controller("eventCatCtrl", function($scope){
        $scope.includeData = {}; 
    $scope.catValues = function(catTitle, catDes, $event){
        $scope.includeData.catTitle = null;                // modify this
        $scope.includeData.catDes = null;       
    }
});

并像这样更改您的包含

<input type="text" class="form-control" id="catTitle" ng-model="includeData.catTitle" placeholder="Please enter your Category Title">

<textarea name="" class="form-control" id="catDes" placeholder="Enter a description here" ng-model="includeData.catDes" id="" cols="10" rows="6"></textarea>

AngularJS $ scope.value = null无效

1 个答案: