2013-10-10 2 views
0

В этом plnkr редактируемое значение обнаружено внутри src, но значение вне src остается пустым.AngularJS View not update ourside src

Выберите различные переключатели в plnkr, внешний src не обновляется.

Могу ли я узнать, почему и как это исправить?

ответ

1

Это типичный пример случая, когда ng-model не содержит в нем ..

Вот соответствующий плункер, который решает проблему.

Plunker

app.controller('testCtrl',function($scope,$timeout){ 
    $scope.data = { 
    filteringText : '' 
    }; 

}); 

Это происходит потому, что нг-включать создает новую область и из-за способа прототипы работают в JavaScript примитивное значение в детском прототипе переопределяет примитив в родителе. Прочитайте this, если не ясно, что такое прототипное наследование.

PS: с использованием $parent не очень хороший дизайн. Он плотно соединяет взгляд с логикой.

+0

Спасибо. Data.filteringText - хорошая идея, чем использование $ parent.filteringText. – lostpacket

+0

Эта ссылка действительно полезна, и мне нужно пройти ее, как и ваш ответ. – lostpacket

+0

Согласен, лучше, чем мое решение! Я забыл, как угловой сканирует области, когда он не находит ценность в своем собственном объеме. –

1

Это связано с тем, что ng-include создает свою собственную область, а значение ng-модели, которое вы назначаете с помощью переключателей, ограничено этой областью.

Таким образом, ваш {{filteringText}} в основном корпусе не имеет понятия, что filteringText устанавливается с помощью ng-model.

Если мы сдвинем содержимое вашего нг-включают в организм, например, так:

<body ng-controller="testCtrl"> 


    <div ng-include src="'input.html'"></div> 

    <input type="radio" ng-model="filteringText" value="">All 
    <input type="radio" ng-model="filteringText" value="Add">Add 
    <input type="radio" ng-model="filteringText" value="Edit">Edit 
    <input type="radio" ng-model="filteringText" value="Delete">Delete 
    </br> 
    Outside src : {{filteringText}} 

Then we see that the outside src is updated, as we would expect, with the ng-model value.

Если мы хотим обновить значение в главном приложении сферы с внутри ng-include мы можем использовать $ parent.value внутри вашего файла input.html, например:

<input type="radio" ng-model="$parent.filteringText" value="">All 
<input type="radio" ng-model="$parent.filteringText" value="Add">Add 
<input type="radio" ng-model="$parent.filteringText" value="Edit">Edit 
<input type="radio" ng-model="$parent.filteringText" value="Delete">Delete 
<br/> 
Inside src : {{$parent.filteringText}} 

And this will update your main body when you make changes inside ng-include.