2014-05-20 1 views
0

은 내가 성공적으로 팝업을 생성필자의 경우 Angular를 사용하여 데이터를 바인딩하는 방법은 무엇입니까?

Angular-UI-Bootstrap custom tooltip/popover with 2-way data-binding

이 게시물에서에서 기반 툴팁을 만들려고하고 있지만 문제가 내 스크립트에이 추가

내 popover.html에 컨텐츠를 제공하는이 된 .js

var app = angular.module('myApp', ['ui.bootstrap', 'ian.bootstrap']); 

app.controller('myCtrl', function ($scope) { 
    $scope.item = { 
    title: 'Original Title', 
    content:'content 1' //newly added item 
    }; 
    $scope.text = 'Click me'; 
}); 

그리고 내 popover.html에 표시 할

<div class="popover-content"> 
    {{item.content}} 
</div> 

아무 것도 표시되지 않습니다. 누군가가 그것에 대해 나를 도울 수 있습니까? 고마워요!

내 plunker

http://plnkr.co/edit/5pBZ9qq79OPl2tGEeYYV?p=preview

답변

0

당신은 당신의 divng-controller를 추가하고 다음과 같이 컨트롤러의 이름을 지정할 수 있습니다 : 사용 사례 전에

<div class="popover-content" ng-controller='myCtrl'> 
    {{item.content}} 
</div> 
0

을 기본 구문은을 만들 수 있습니다 사용자 지정 지시. 이 페이지의 모든 코드 샘플은 각 씨앗 템플릿에서 시작되었습니다. 모난 씨앗 골격에서 시작하는 것은 사용자 지정 지시문을 구현하기 시작하기 위해 모델을 추출하기가 쉽습니다.

다음
<html ngApp="myApp"> 

    ... 

    <div my-first-directive></div> 
    <script src="lib/angular/angular.js"></script> 
    <script src="js/app.js"></script> 
    <script src="js/directives.js"></script> 

    ... 

</html> 
0

하면은과의 지시문 패스 후 기본적으로 당신이 컨텐트 항목이 아닌 원시 텍스트의 결합으로 ATTR iantooltip-content을 통과해야

Plunkr 일 갱신된다 지시어 분리 범위 옵션과 같은 내용의 바인딩 :

iantooltipContent: '=' 

그냥 appenToBody 변수를 변경하면됩니다. 네.

각도 지시문에 대한 자세한 내용은 docs을 읽어야합니다.

관련 문제