AngularJS Passing Scope?

Question

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

Я отбросил это до очень простого примера (реальный случай более сложный). У меня есть текстовое поле и кнопка внутри ng-переключателя. Переключатель, который я прочитал, создает его собственную локальную область.

Что я хочу сделать, передавая значение текстового поля функции, когда нажимается кнопка. В этой функции я сделаю то, что нужно сделать со значением, затем очистите текстовое поле. Я изо всех сил пытаюсь найти правильный способ сделать это.

Controller Код:

$scope.temp = 1; 

$scope.tempCall = function (tempModel) { 
    tempModel = ""; //this doesn't work 
    $scope.tempModel = ""; //nor does this 
}; 

HTML/Шаблон:

<div ng-switch on="temp"> 
    <div ng-switch-when="1"> 
     <input ng-model="tempModel" /> 
     <input type="button" ng-click="tempCall(tempModel)" /> 
    </div> 
    <div ng-switch-when="2">TWO</div> 
</div> 

Я считаю, что на самом деле может пройти объем от родительского или корневого объема и очистить значение, но это не " чувствовать себя "правильно. Каков правильный (Угловой) способ очистить это значение?

Answer 1

Когда вы работаете с примитивными значениями в угловых областях, вы не можете перезаписать значение в родительской области из детской области. Это связано с тем, что угловой использует прототипное наследование javascript.

Что вы можете сделать в этом случае, это создать объект в родительской области, а затем вы можете обновить значения в области содержимого. Поскольку вы не переписываете объект (только связанные с ним свойства), ссылки работают.

Я создал демо этого на шлепнуть вы можете view it here

$scope.temp = 1; 
$scope.tempModel = {}; 

$scope.tempCall = function() { 
    $scope.tempModel.previous = $scope.tempModel.value 
    $scope.tempModel.value = ""; 
}; 

<div ng-switch on="temp"> 
    <div ng-switch-when="1"> 
     <input ng-model="tempModel.value" /> 
     <input type="button" ng-click="tempCall()" /> 
     {{tempModel.previous}} 
    </div> 
    <div ng-switch-when="2">TWO</div> 

Answer 2

Вот один из способов сделать это:

<input type="button" ng-click="tempCall(tempModel);tempModel='';" /> 

---

Вероятно, более «Угловой путем» будет использовать точку в вашей модели, как:

<input type="text" ng-model="tempModel.value" /> 

Затем вызовите вашу функцию путем передачи tempModel объекта, такого как:

<input type="button" ng-click="tempCall(tempModel)" /> 

Тогда вы сможете очистить значение с:

$scope.tempCall = function (tempModel) { 
    tempModel.value = ""; 
}; 

Here is a fiddle

Чтобы предотвратить проблемы Databinding, «правило большого пальца, если вы используете нг-модель там должна быть точка где-то «. Miško Hevery