Angular JS - $watch 控制器指令中的更改

Question

我正在尝试 $watch 指令范围内发生的更改，并在对象发生更改时将其添加到数组中。编辑功能在指令范围内，但保存功能在指令范围之外，即从控制器范围调用保存。我正在使用一个共享对象，通过两种方式绑定来访问指令范围内已编辑的对象。编辑已正确保存，但我需要过滤掉所有未更改的对象。我不明白为什么更改没有反映在 $watch 中。

//控制器

vm.accessor = {};
getGlobalConfigs();
$scope.$watch('vm.accessor.globalConfigs', function(newValue, oldValue) {
    console.log('config changed');
});
function getGlobalConfigs() {
    vehicleConfigurationsFactory.getGlobalConfigs()
    .then(function (data) {
        vm.accessor.globalConfigs = data;
    });
}

// 指令

(function(){
'use strict';

angular.module('vehicleConfigurationsModule')
.directive('globalConfig', globalConfig);

    function globalConfig() {

    var directive = {
        link: link,
        replace: false,
        templateUrl: 'app/vehicle-configurations/global-config-tr.html',
        scope: {
          confkey: '@',
          confvalue: '=',
          confprecedence: '=',
          confdescription: '=',
          accessor: '='
        }
    }

    return directive;

    function link(scope, el, attrs, controller) {
      scope.master = {
        confvalue: scope.confvalue,
        confprecedence: scope.confprecedence,
        confdescription: scope.confdescription
      };
      scope.disabled = true;
      scope.precedenceOptions = [
        {value: "GLOBAL"},
        {value: "VEHICLE"}
      ];
      scope.selectedOption = {value: scope.confprecedence};
      scope.edit = function() {
        scope.disabled = false;
        scope.accessor.disabled = false;
      };
      scope.cancel = function() {
        scope.disabled = true;
        scope.accessor.disabled = true;
        scope.confvalue = scope.master.confvalue;
        scope.confprecedence = scope.master.confprecedence;
        scope.confdescription = scope.master.confdescription;
      };
      scope.setPrecedence = function(value) {
        scope.confprecedence = value;
      };
    }

 }


})();

//指令实例

<tr ng-repeat="config in vm.accessor.globalConfigs" global-config confkey="{{ config.confKey }}" confvalue="config.confValue" confprecedence="config.precedence" confdescription="config.description" accessor="vm.accessor"></tr>

// 指令模板

<td ng-model="config.confKey">{{ confkey }}</td>
<td>
    <input type="text" class="form-control" ng-model="confvalue" ng-disabled="disabled">
</td>
<td>
    <select class="form-control" ng-options="option.value for option in precedenceOptions track by option.value"
ng-model="selectedOption" ng-disabled="disabled" ng-change="setPrecedence(selectedOption.value)"></select>
</td>
<td>
    <input type="text" class="form-control" ng-model="confdescription" ng-disabled="disabled">
</td>
<td>
    <a ng-show="disabled" role="button" translate="{{ 'vehicle-configurations.edit' }}" ng-click="edit()"></a>
    <a ng-show="!disabled" role="button" translate="{{ 'vehicle-configurations.cancel' }}" ng-click="cancel()"></a>
</td>

Answer 1

这似乎是一种奇怪的方法，但我认为您只需要告诉您的手表像这样观察 globalConfigs 内部的对象：

$scope.$watch('vm.accessor.globalConfigs', function(newValue, oldValue) {
     console.log('config changed');
},true);

注意 $watch 的第三个参数 ",true" 告诉 watch "deep watch".

Angular JS - $watch 控制器指令中的更改

Angular JS - $watch changes made in directive from controller

watch

angularjs

angularjs-directive

angularjs-scope

angular-controller