$ scope var не распространяется на ребенка

Question

В списке элементов, щелкнув элемент, открывается поле ввода с использованием ng-show="showInput=true".

<div ng-app="myApp" ng-controller="Ctrl"> 
<li ng-click="showInput=true" ng-repeat="label in labels">{{label}} - ---> show  input = {{showInput}} 
    <form ng-show="showInput" > 
    <input type=text value={{label}}><button ng-click="saveDate()">save</button> 
    </form> 
</li> 
</div> 

Однако, при нажатии на save, установка showInput=false форма не скрывает:

angular.module('myApp', []) 
.controller('Ctrl', ['$scope', function($scope) { 
    $scope.labels=["click a", "click b", "click c", "click d", "click e"]; 
    $scope.showInput = false; 

    $scope.saveData = function(){   
     $scope.showInput = false; 
    } 
    }]); 

Я подозреваю, что это сфера проблема родитель/ребенок. Может ли кто-нибудь указать, как это сделать?

Fiddle: http://jsfiddle.net/supercobra/PUZzZ/

Answer 1

У вас здесь есть несколько ошибок.

1. В вашем HTML-коде вы должны написать saveData() (не saveDate()).

2. Когда вы нажмете любой элемент внутри своего лика (включая вашу кнопку), он установит ваш showInput в true.

3. Вы имеете дело с объектом чистого JavaScript в пределах области действия. Есть вопрос, который конкретно спрашивает, что делать с этим на AngularJS Meetup you can see here. Лучшее решение, похоже, использует объект, поэтому дочерний и родительский объекты используют один и тот же ссылочный объект. Вот как я это сделал (используя ключ системы вместо ярлыка будет безопаснее Тхо)

Look at this fiddle for my solution.

<div ng-app="myApp" ng-controller="Ctrl"> 
    <li ng-repeat="label in labels"> 
     <span ng-click="showInput[label] = true">{{label}}</span> - ---> show input = {{showInput}} 
     <form ng-show="showInput[label]" > 
     <input type=text value={{label}}><button ng-click="saveData(label)">save</button> 
     </form> 
    </li> 
</div> 


angular.module('myApp', []) 
    .controller('Ctrl', ['$scope', function($scope) { 
     $scope.labels=["click a", "click b", "click c", "click d", "click e"]; 
     $scope.showInput = {}; 

     $scope.saveData = function(label){   
      $scope.showInput[label] = false; 
     } 
    }]); 

Эта работа отлично. Проблема в том, что если вы используете переменную $ scope внутри дочернего элемента, родитель не сможет получить к ней доступ при сохранении.

Answer 2

Yo дал <button ng-click="saveDate()"> в вашей точке зрения, и в вашем контроллере вы вызываете функцию как $scope.saveData. Ошибка печати. изменить $scope.saveData к $scope.saveDate

Answer 3

Проблема заключается в том, что на самом деле ng-repeat создает свою собственную сферу, и что вы переопределить showInput.

Что я обычно делаю в этой ситуации, это отслеживать те формы, которые в настоящее время показаны, и реализовать подобный методу переключения, как показано в this fiddle. Это отслеживает открытую форму внутри контроллера, а не объект $scope, который предоставляет только методы (для всех дочерних областей, например, ng-repeat) для доступа к частной информации.

У вас также есть опечатка в вызове saveData, но это не проблема.

Answer 4

почему бы вам не попробовать что-то вроде:

нг-клик = «showInput = ложь»>

иногда используя нг щелкните внутри формы оленья кожа работает так, как вы хотите. u можете попробовать с типом ввода = 'submit' также делает вашу работу намного проще.