Почему ng-модель в шаблоне директивы не обновляется при изменении значения из контроллера - PullRequest
Новая
       34

Почему ng-модель в шаблоне директивы не обновляется при изменении значения из контроллера

0 голосов
/ 22 мая 2018

Я использую директиву и из двухстороннего связывания я изменяю переменную объекта даты, которая изначально передается в директиву.

Но когда я делаю некоторые изменения в переменной даты, например 

$scope.valueee = 1;
$scope.press = function(){
    $scope.searchterm.setHours($scope.valueee++, 0, 0, 0);
  if(!$scope.$$phase)$scope.$apply()
}

но оно не будет обновлять представление с помощью ng-модели в представлении шаблона внутри директивы 

'ng-model="term"'

Ниже приведен пример кода

jsfiddle link

1 Ответ

0 голосов
/ 22 мая 2018

Я думаю, что вы сталкиваетесь с этой проблемой, когда связываетесь непосредственно с примитивом: https://github.com/angular/angular.js/wiki/Understanding-Scopes

Выделение мое

Наследование области обычно простое, и вы часто этого не делаетедаже нужно знать, что это происходит ... пока вы не попробуете 2-стороннее связывание данных (т.е. элементы формы, ng-модель) с примитивом (например, число, строка, логическое значение), определенным внутри родительской области видимости изнутридетская область действия .Это не работает так, как ожидает большинство людей.В результате получается, что дочерняя область получает свое собственное свойство, которое скрывает / скрывает родительское свойство с тем же именем.Это не то, что делает AngularJS - это то, как работает наследование прототипов JavaScript.Новые разработчики AngularJS часто не осознают, что ng-repeat, ng-switch, ng-view, ng-include и ng-if все создают новые дочерние области, поэтому проблема часто обнаруживается, когда задействованы эти директивы.(См. этот пример для быстрой иллюстрации проблемы.)

Эту проблему с примитивами можно легко избежать, следуя "передовому опыту" всегда с '.'в ваших ng-моделях - смотреть стоит 3 минуты.Миско демонстрирует проблему примитивного связывания с ng-switch.

Плункер , связанный с вышеупомянутым , непосредственно показывает вашу проблему (источник ниже):

javascript: 

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

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

  /*
  ng-repeat generates new scopes which will be child scopes of the scope within
  which they are generated. In other words, this scope is the parent scope for
  the child scopes generated by the ng-repeat in this example. Child scopes
  inherit things from their parent's scope.
  */

  // The initial main image 
  var initialImg = "http://3.bp.blogspot.com/-z8kzafZYkfQ/UERf6IbjJJI/AAAAAAAAALE/qaAxqqawXpM/s1600/Cat+Pictures+1.jpg";

  /*
  A primitive holding the URL for the main image

  This scope's child scopes will "shadow" this primitive, which basically means
  they'll get their own copy that is initialy the same value. The child scopes
  can only see their own copy though, so modifying the value in the child scope
  does not affect the value in the parent scope.
  */
  $scope.mainImgUrl = initialImg;

  /*
  An object holding the URL for the main image

  This scope's child scopes will NOT get their own copy of this object.
  Referencing main or main.imgUrl in the child scope will reference this object
  on this scope (unless the child scope explicitly define its own "mainImg" object.)
  */
  $scope.mainImg = { url: initialImg };

  // Our 'thumbnail' images
  $scope.images = [
      "http://happy.fm/wp-content/uploads/2011/10/random-owl.jpg",
      "http://www.superhumor.com/emoticonos/8761.gif"
  ];

});

html: 

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" data-semver="1.0.7"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">

    <h1>ng-click inside ng-repeat setting value on parent scope</h1>

    <p>
    Example to illustrate the nuances of prototypical inheritance. See 
    <a href="http://docs.angularjs.org/tutorial/step_10#comment-977962885">this Angular Tutorial Step 10 question</a>
    and
    <a href="https://github.com/angular/angular.js/wiki/Understanding-Scopes">Understanding Scopes</a>
    .
    </p>


    <h3>Using primitive:</h3>

    <div class="example">

      <img class="mainImg" ng-src="{{mainImgUrl}}" />

      <p>This is the parent scope with the main image.</p>

      <p>$scope.mainImgUrl == {{mainImgUrl}}</p>

      <div class="thumbs">

        <p>Thumbs generated with ng-repeat, with ng-click setting <strong>$scope.mainImgUrl</strong> (click on them to see what happens):</p>

        <div class="thumbDiv" ng-repeat="img in images">

          <img class="thumb" ng-src="{{img}}" ng-click="mainImgUrl = img" />

          <p>This is a child scope generated by ng-repeat.</p>

          <p>$scope.mainImgUrl == {{mainImgUrl}}</p>

        </div>

      </div>

    </div>


    <h3>Using object:</h3>

    <div class="example">

      <img class="mainImg" ng-src="{{mainImg.url}}" />

      <p>This is the parent scope with the main image.</p>

      <p>$scope.mainImg.url == {{mainImg.url}}</p>

      <div class="thumbs">

        <p>Thumbs generated with ng-repeat, with ng-click setting <strong>$scope.mainImg.url</strong> (click on them to see what happens):</p>

        <div class="thumbDiv" ng-repeat="img in images">

          <img class="thumb" ng-src="{{img}}" ng-click="mainImg.url = img" />

          <p>This is a child scope generated by ng-repeat.</p>

          <p>$scope.mainImg.url == {{mainImg.url}}</p>

        </div>

      </div>

    </div>

  </body>

</html>
...