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

Preview · Accepted Answer · 2014-05-23 07:12:35Z

0

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

answered May 23, 2014 at 7:12

Preview

35.9k10 gold badges95 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Preview · Accepted Answer · 2014-05-26 10:55:10Z

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, 2014 at 10:55

Preview

35.9k10 gold badges95 silver badges113 bronze badges

answered May 20, 2014 at 20:25

Lucas_Santos

4,75018 gold badges76 silver badges122 bronze badges

Comments

Preview · Accepted Answer · 2014-05-26 10:55:20Z

0

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>

edited May 26, 2014 at 10:55

Preview

35.9k10 gold badges95 silver badges113 bronze badges

answered May 20, 2014 at 22:40

user3654728

561 bronze badge

Collectives™ on Stack Overflow

How to bind data using Angular in my case?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related