AngularJS $scope.value = nulll 不工作

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 不起作用。

如果我在 step2.php 文件中包含 ng-controller="eventCatCtrl"，则 null 有效。

我只想知道为什么 null 没有清除 catTitle 和 catDes 的值，以及为什么除此之外的其他所有内容都可以正常工作。

Answer 1

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

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

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>