2015-01-13 2 views
1

좋은 하루,앵글 스트랩. Popover에서의 양방향 바인딩

템플릿을 통해 내용을 팝업 본문에 성공적으로 바인딩 할 수 있지만이 영역 내부의 변경 사항은 다시 부모 범위에 바인딩되지 않습니다. 다음은 간단한 예입니다.

Plunker

나는 당신이 원시적을 결합하려는 어떤 도움

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> 
    <title>2-way binding popover</title> 
</head> 
<body> 
<div data-ng-app="myApp" data-ng-controller="defaultCtrl" style="margin: 100px 100px"> 
    <button type="button" class="btn btn-lg btn-danger" data-unique="1" data-auto-close="1" data-placement="bottom" data-content-template="popover-tmpl.html" data-title="Title Two" data-html="true" bs-popover> 
     Change name 
    </button> 
    {{ name }} 
    <script type="text/ng-template" id="popover-tmpl.html"> 
     {{ name }} 
     <input type="text" data-ng-model="name"> 
    </script> 
</div> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.5/angular-strap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.5/angular-strap.tpl.min.js"></script> 

<script type="text/javascript"> 
    var app = angular.module("myApp", ['mgcrea.ngStrap']); 
    app.controller("defaultCtrl", ["$scope", function($scope) { 
     $scope.name = 'Roman'; 
    }]); 
</script> 
</body> 
</html> 
+0

popover는 하위 범위 **를 생성합니다. [so dot rule] (http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal- prototypical-inheritance-in-angularjs) ** – PSL

답변

2

에 대한 감사 할 것입니다. 아이 스코프 때문에 문제가되는 각도. 그러나 객체에 바인딩하면 작동합니다. 범위 선언 변경 :

$scope.user = { 
    name: 'Roman' 
} 

그리고 바인딩을 user.name으로 변경하십시오. 업데이트 된 Plunker가 있습니다 : http://plnkr.co/edit/ZEvXi9wFF8FVh0WFxn3l?p=preview

+0

감사합니다. 그러나 간단한 예제를 게시했습니다. 좀 더 복잡한 앱을 개발 중이므로 [이 예] (http://plnkr.co/edit/ykmgQMypnJl8muIx9SzZ?p=preview)를 살펴보십시오. 나는 내부에 팝 오버 (popover)가있는 지시자 (transclude directive)를 가지고있다. – forza020

+0

이 질문에 대한 문맥에서 벗어 났으며 주석의 의미가 아닙니다. 여기에 코드가 포함 된 솔루션을 게시 할 수 없으며 다른 사람들이 동일한 문제가있는 경우 해결책을 찾거나 찾을 수 없습니다. 업데이트 된 코드와 예제로 새로운 질문을 게시하는 것이 좋습니다. – iH8

+0

네, 맞습니다. – forza020