javascript - AngularJS ng-if 带有 ng-select 事件的隐藏元素不起作用

Question

我有一个隐藏的select输入，它被ng-if隐藏。在隐藏的 select 中，我添加了一个 ng-change 标签，该标签依次调用一个函数来显示一个 img ，该图片也被隐藏ng-if。

1. hiddenNinja 最初是隐藏的。
2. 在外部函数上，hiddenNinja 显示其元素(例如 select 输入)。
3. 当select的值改变时，hiddenTommy不会显示。

但是，如果最初显示 hiddenNinja，则只会显示 hiddenTommy。

下面示例的代码。

HTML:

<div ng-controller="NinjaController"> // Controller is here
    <div ng-if="hiddenNinja"> // ng-if is here
        <select ng-change="validateFilled()" ng-model="data"> // ng-change & ng-model
            <option selected>First</option>
            <option ng-repeat="item in items" >{{ item }}</option>
        </select>
    </div>
</div>

// Image shown below.
// On the actual code, image is a footer on a different php file,
// Which is also why I use $rootScope in this example.
// For this question, I'll include this image in this partial view.
<img src='randomSource' ng-if='hiddenTommy' />

Angular :

app.controller('NinjaController',['$scope', '$rootScope', function($scope, $rootScope) {
    $scope.data = "First";
    $scope.items = ['Sight', 'Smell', 'Taste', 'Sight', 'Touch'];

    $scope.validateFilled = function() {
        if ($scope.data != "First") {
            $rootScope.hiddenTommy = true;
        }
    };
}]);

我在网上寻找答案无济于事。我将不胜感激所提供的任何帮助。

感谢大家审阅这段代码。

Answer 1

$scope.data 在 Controller 中始终为“First”的原因是，ngIf 指令有其自己的作用域，因此当您仅选择一个值时 data变化发生在该范围内，而不是您期望的范围内。在 NinjaController 中使用 $scope.data = { select: 'First' }，然后使用 ng-model="data.select"。所以没有理由为此创建一个工厂。在这里阅读有关范围的更多信息:https://github.com/angular/angular.js/wiki/Understanding-Scopes

PS:您应该使用 ng-options 而不是将 ng-repeat 放在 option 上来将项目添加到选择框，它是一个很好的做法。