javascript - Angular : $watch not triggered on change ($scope issue with include page)

Question

HTML:

Filter: 
<input type="radio" ng-model="Type" value="Rear"> Rear
<input type="radio" ng-model="Type" value="Front"> Front
<br>
Select:
<name-value-select entry="entry" field="axleType" options="filterTypes"></name-value-select>

指令:

  .directive('nameValueSelect', function () {
    return {
    restrict: "E",
    scope: {
        entry: "=",
        field: "@",
        options: "=",
        onInputChange: "&"
    },
    controller: function ($scope) {

        $scope.onChange = function () {
            console.log("selected changed");
            $scope.entry.type = $scope.option.value;
            $scope.onInputChange();
        };

        var getItemForValue = function (value) {
            var item = null;
            $scope.options.forEach(function (_option) {
                if (_option.value == value) {
                    item = _option;
                }
            });
            return item;
        };

        $scope.$watch("entry", function () {
            console.log("entry changed");
            $scope.option = getItemForValue($scope.entry[$scope.field]);
        }, true);

    },
    template: '<select ng-model="option" ng-options="o.Description for o in options" ng-change="onChange()"><option value="" selected="selected">Please Select </option></select>'

};  })

Controller :

$scope.Description = '';
$scope.entry = {Description: ''};
$scope.Type = 'Front';
$scope.entry.type = '';


$scope.$watch('Type', function (Type) {
    $scope.filterTypes = [];
    $scope.axleTypes = new API.GetAxleTypes(function () {
        angular.forEach($scope.axleTypes, function(axleType) {
            if (axleType.Type == Type) {
                this.push(axleType);
            }
            // if(!$scope.$$phase) $scope.$digest(); // tried this, does not have any affect
    }, $scope.filterTypes); // '}, $scope.filterTypes, true)'--> did nothing for me here     
}); 
    $scope.filterTypes.sort(function (a, b) {
        return a.Description.localeCompare(b.Description);
    });
}); // '}, true)' --> did nothing for me here

问题:

自定义选择控件最初会填充类型为“Front”的项目，如果我将 Rear 设置为默认值，也会填充“Rear”。

但是，当在单选按钮之间切换时，不会调用 watch 函数，并且选择不会填充满足新选择的过滤器类型的项目。

/////////////////////////////////////////////////// 缩小问题范围: ///////////////////////////////////////////////////

当把它移到一个独立的项目时，我发现我上面的代码有效:-(

这里是原始的 select NOT 作为自定义指令:

    <select ng-model="$parent.selectedFrontAxle" ng-options="axleType.Description for axleType in axleTypes | filterByType: 'Front' | orderBy:'Description'"  id="frontAxles" class="formRequire" required>            
        <option value="" selected>Select Axle Type ..</option>  
    </select>

这里是作为自定义指令的选择控件:

  <name-value-select   entry="entry" field="axleType" options="filterTypes"></name-value-select>

显然这是问题所在:"ng-model="$parent.selectedFrontAxle"

如果我采用指令“name-value-select”并将其移动到父页面，代替 include 语句，它就可以工作。

但这不是我想要的。所以我需要把它留在包含页面中。

但是，如果我使用 ng-model="$parent.selectedFrontAxle" 并将其添加到包含页面上的任何元素，则没有任何效果。

任何没有 ng-model="$parent.selectedFrontAxle" 的，仍然没有任何效果。

我可以看到问题的范围，但我不知道如何纠正它。

呃!!!仍然没有解决方案。

//
//
//////////////////////////////////////////////////////////// 马克·拉杰科克 ////////////////////////////////////////////////////////////

一如既往地感谢您的帮助。虽然，我认为我在第 2 点上没有说清楚我在某些情况下希望代码而不是用户进行预过滤。不过我想通了。因此，对于任何希望通过指令抽象出控件的人，并且在这种情况下，过滤过程由用户和代码执行，这里是 plunker 解决方案:

http://plnkr.co/edit/tnXgPKADfr5Okvj8oV2S?p=preview

Answer 1

在this plunker ，我修改了代码以允许用户选择“Rear”或“Front”，并且选择列表将动态更新。所选值在 MainCtrl 范围内作为 $scope.selected.item 可用。 (我删除的指令中有很多不必要的代码。使用 ng-model 时不需要 onChange 处理程序。)

<name-value-select selected-item="selected.item" options="filterTypes">
</name-value-select>

app.directive('nameValueSelect', function () {
    return {
        restrict: "E",
        scope: {
            selectedItem: "=",
            options: '='
        },
        template: ...

由于 ng-include 创建了一个子范围，所有原始属性都被转换为对象属性，因此 JavaScript 原型(prototype)继承将按预期工作(即，当值更改时， MainCtrl 中定义的 $scope 对象将更改而不是新的在本地范围内创建原始属性)。

我相信上面提到的 plunker 会满足您的“第 1 点”。

我现在将着眼于为“第 2 点”创建一个 plunker...(我会在更新此答案时添加评论)。

---

This plunker过滤指令中的选择列表:

<name-value-select selected-item="selected.item" choice="choice.type"
 options="myTypes"></name-value-select>

app.directive('nameValueSelect', function () {
    return {
        restrict: "E",
        scope: {
            selectedItem: "=",
            choice:  "=",
            options: "=",
        },
        controller: function($scope)  {
          $scope.$watch('choice', function (selectedType) {
            $scope.selectedItem = '';  // clear selection
            $scope.filterTypes = [];
            angular.forEach($scope.options, function (type) {
              if (type.Type === selectedType) {
                this.push(type);
               }
            }, $scope.filterTypes);
            $scope.filterTypes.sort(function (a, b) {
              return a.Description.localeCompare(b.Description);
            });
          });
        },
        template: '<select ng-model="selectedItem" ' +
         'ng-options="o.Description for o in filterTypes">' +
         '<option value="" selected="selected">Please Select</option>' +
         '</select>'
    };
});