Javascript 将ng模型属性绑定到正在更改的对象值如何更新ng模型_Javascript_Jquery_Angularjs

Javascript 将ng模型属性绑定到正在更改的对象值如何更新ng模型

javascript jquery angularjs

Javascript 将ng模型属性绑定到正在更改的对象值如何更新ng模型,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,我正在尝试将testVar1更新为输入的ng模型属性。值成功获取 $scope.testVar1 = menuElements[$scope.element.id].value; 但是当我改变了 menuElements[$scope.element.id].value; 我希望testVar1与其输入视图一起更新这可能吗？如果是，我做错了什么？我在下面做了一个函数，试图将代码硬设为val=2，但没有成功。似乎只有在构建页面时，范围变量才会更新，至少是按照我编写页面的方式 HTML: 我

我正在尝试将testVar1更新为输入的ng模型属性。值成功获取

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

但是当我改变了

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

我希望testVar1与其输入视图一起更新这可能吗？如果是，我做错了什么？我在下面做了一个函数，试图将代码硬设为val=2，但没有成功。似乎只有在构建页面时，范围变量才会更新，至少是按照我编写页面的方式

HTML:

我想你可以用$watch

将menuElements分配给$scopevariable并向其添加$watch侦听器

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

AngularJS

您需要菜单元素作为作用域的一部分，以便能够观察其中的变化。由于您的指令具有独立的作用域，因此它应该在指令的作用域内。下面是一个这样做的示例：

HTML

Plunker:

您在哪里定义菜单元素？它是某个范围的一部分还是一个普通的JavaScript变量？您没有在代码段的任何地方定义它。您发布的html是指令模板吗？@j.wittwer是的html是指令模板template@Vadim它目前不在范围内，它只是简单的JS，我正在考虑将它添加到服务提供商，或者工厂会有帮助吗？@user2958863 Angular无法监视普通JavaScript变量的更改，它应该是某个作用域的一部分。Atm更新我的菜单元素的函数是来自java插件的常规JS回调函数。有没有办法用常规JS函数更新作用域中的变量？菜单元素必须是$scope的一部分。它已经是一个JS变量，所以将其分配给作用域应该不会有问题。

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);

            }
        }
    };
});

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

<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>

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;
        });
      }
    }
  });

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