How to bind data using Angular in my case?

Question

I am trying to create a tooltip based from from this post

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

I successfully created the popup but I have trouble delivering the content to my popover.html

I added this to my script.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';
});

and I want to display it in my popover.html

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

It doesn't show anything. Can someone help me about it? thanks a lot!

my plunker

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

score 0 · Answer 1 · edited May 26 '14 at 10:55

0

You can add the ng-controller in your div and then specify the controller name like so :

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

edited May 26 '14 at 10:55

Preview

35,317
10
92
112

answered May 20 '14 at 20:25

Lucas_Santos

4,638
17
71
118

score 0 · Answer 2 · edited May 26 '14 at 10:55

Before the use cases, the basic syntax to create a custom directive. For all the code samples in this page I started from the angular-seed template. Starting from the angular-seed skeleton is quite easy to extract a model to begin to implement custom directives.

<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>

score 0 · Answer 3 · answered May 23 '14 at 07:12

Here is your updated working Plunkr

Basically you have to pass the attr iantooltip-content with the binding of the content item, not the raw text, and after in the directive pass in the directive isolate scope options the binding of the content like :

iantooltipContent: '='

Just change the appenToBody variable and you're done.

You should read the docs for more infos about Angular directive :)

How to bind data using Angular in my case?

3 Answers3