Question

我正在尝试更新testVar1 ng-model attr以获取输入。价值成功获得

$scope.testVar1 = menuElements[$scope.element.id].value;

但是当我改变

的值时

 menuElements[$scope.element.id].value;

我希望testVar1及其输入视图一起更新这可能吗？如果是这样我做错了什么？我在下面创建了一个函数来尝试将代码硬设置为val = 2，但它似乎不成功，看起来范围变量只在构建页面时更新（至少我编写它的方式）

HTML：

<div class="well">
    <label for="{{element.id}}">{{element.info}}:</label>

    <input class="ui-slider" type="range" ng-model="testVar1" ng-change="changeValue(element.id)" name="{{element.id}}" min="{{element.min}}" max="{{element.max}}" id="{{element.id}}"/>
    <button ng-click="setTestValue()">Test</button>
</div>

指令和控制器

cordovaAngular.directive('myCustomer', function () {

    return {
        restrict: 'A',
        scope: {
            element: '=',
            elementArray: '='
        },
        templateUrl: elementURL,
        controller: function ($scope) {
            var test = JSON.stringify($scope.elementArray);
            $scope.selectedOption = "Success"
            $scope.testVar1 = menuElements[$scope.element.id].value;
            console.log($scope.testVar1);
            console.log($scope.element.id);
            $scope.changeOption = function (selectedItem) {
                $scope.selectedOption = selectedItem;
                // alert(1);
            }
            $scope.changeValue = function (id) {
                menuElements[id].onChange();
            }
            $scope.setTestValue = function () {

                menuElements[$scope.element.id].value = 2;
                $scope.testVar1.
                console.log($scope.testVar1);

            }
        }
    };
});

Answer 1

我认为您可以使用$watch

将menuElements分配给$scope变量，并为其添加$watch侦听器。

$scope.$watch('menuElements', function(newVal, oldVal){
    // When menuElementes change, update testVar1 here
    $scope.testVar1 = menuElements[$scope.element.id].value;
}, true);

AngularJS docs for $watch

Answer 2

您需要menuElements成为scope的一部分才能观看其中的更改。由于您的指令具有隔离范围，因此它应该在您的指令范围内。这是一个这样做的例子：

<强> HTML

<body ng-controller="ctrl" id="ctrl">
  <ul>
    <li ng-repeat="element in data.elementArray">{{element.id}} - {{data.menuElements[element.id].value}}</li>
  </ul>
  <div my-customer="" element="data.element" element-array="data.elementArray" menu-elements="data.menuElements"></div>
</body>

<强>的JavaScript

angular.module('app', []).
  controller('ctrl', ['$scope', function($scope) {
    $scope.data = {
      elementArray: [{
        id: 'el1',
        info: 'Element Info 1',
        min: 0,
        max: 9
      }, {
        id: 'el2',
        info: 'Element Info 2',
        min: 10,
        max: 19
      }],
      menuElements: { 
        'el1': {
          value: 1
        },
        'el2': {
          value: 15
        }
      }
    };
    $scope.data.element = $scope.data.elementArray[0];
  }]).
  directive('myCustomer', function() {
    return {
      template: '<div class="well">' +
                  '<label for="{{element.id}}">{{element.info}}:</label>' +
                  '<input class="ui-slider" type="range" ng-model="testVar1" ng-change="changeValue(element.id)" name="{{element.id}}" min="{{element.min}}" max="{{element.max}}" id="{{element.id}}"/>' +
                  '<button ng-click="setTestValue()">Test</button>' +
                '</div>',
      scope: {
        element: '=',
        elementArray: '=',
        menuElements: '=' // <= add menuElements to scope
      },
      controller: ['$scope', function($scope) {
        $scope.setTestValue = function() {
          $scope.menuElements[$scope.element.id].value = 5;
        }
      }],
      link: function(scope, element, attr) {
        scope.$watch(function() { // <= Watch changes of scope.menuElements[scope.element.id].value 
          return scope.menuElements[scope.element.id].value;
        }, function(value) {
          scope.testVar1 = value;
        });
      }
    }
  });

Plunker：http://plnkr.co/edit/FLl6pLBdCWAfTbvGSBxQ?p=preview

<强> 编辑：

如果您需要从Angular之外修改scope，您仍然可以通过获取与该范围相关的DOM元素的scope来执行此操作：

function setValue() {
  var scope = angular.element(document.getElementById('ctrl')).scope();
  scope.$apply(function() {
    scope.data.menuElements[scope.data.element.id].value = 7;
  });
}

Plunker：http://plnkr.co/edit/LXwJEtCIxVNgAb5AdJM6?p=preview

将ng-model attr绑定到更改的对象值如何更新ng-model

2 个答案: