Angular js unbind and bind динамически не работает

У меня есть 2 входа с ng-моделью и два элемента, связывающих две модели, я хочу, чтобы, когда я нажимал на кнопку, он переключал привязки, то есть, как элемент 1 связывает модель 2, а элемент 2 связывает модель 1, он работает отлично, но когда начать менять модели, если повлиять на два элемента!

Чтобы проиллюстрировать это, я создал вантуз!

Как это исправить?

app.js:

var app = angular.module('myApp', []);

app.controller('myController', function($scope,$compile) {
  $scope.model1="1";
  $scope.model2="2";

  $('#click').click(function () {

    $('#model1').attr('ng-bind','model2');
    $('#model2').attr('ng-bind','model1'); 
    angular.element($compile( $('#model1'))($scope));
    angular.element($compile( $('#model2'))($scope));
    $scope.$apply();

  });

});
Источник

1 ответ

Решение

Вот пример рабочего плунжера;

Никогда не манипулируйте DOM непосредственно в контроллере. Обычно вы сами не манипулируете домом. Вы используете угловую директиву, чтобы делать то, что вы хотите. Имейте в виду, что если вы хотите использовать jQuery, вы, вероятно, делаете это неправильно, и что есть способ сделать это из углового, не вызывая jQuery.

Javascript

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope,$compile) {


  $scope.name = 'World';

  //input1 and input2 will contain the key of the variable bind to the input.
  $scope.input1 = "value1";
  $scope.input2 = "value2";
  $scope.model = {
     value1 : 1,
     value2 : 2
  }

  // Here is my switch function. I just switch the keys and angular will do the rest.
  $scope.switch = function(){
    var tmp = $scope.input1;
    $scope.input1 = $scope.input2;
    $scope.input2 = tmp;
  }
});

HTML

  <body ng-controller="MainCtrl">
    <!-- Angular provide a directive called ng-click to bind function on clic for the html element -->
    <button ng-click="switch()">switch</button>
    <!-- Here i bind the property of an object. I'll just update the key in input1 to change which property is bind-->
    <input type="text" ng-model="model[input1]" />
    <input type="text" ng-model="model[input2]" />
    <h5 id="model1" ng-bind="model[input1]"></h5>
    <h5 id="model2" ng-bind="model[input2]"></h5>
  </body>

Надеюсь, это помогло вам, если вы хотите продолжить объяснение.

Источник
Другие вопросы по тегам