angular inside colorbox template not working

[Jake K.]

To all members of the Google Angular community,

I've been trying to use colorbox with angular, without much success.

In my view I have sth like this:

...

<button colorbox>open dialog</button> 

...

,where 'colorbox' is a directive that launches the colorbox.

For my colorbox directive definition I have this:

app.directive('colorbox', function(){

...

 element.click('bind', function(){

   $colorbox({

      href: 'path/to/my/colorboxcontentfile.html',

   })

 })

})

The above code works. So I have a bunch of html code inside the 'colorboxcontentfile.html', and

inside it there is a controller and a bunch of ng-models and other angularjs directive.

The only problem is that the angularjs code is not being read ( so ng-controllers, ng-models and other ng directives )

are not being read/compiled properly.

How can I get it to work?

Thanks

PS: I basically try to have a controller inside the content of a colorbox when it opens, so feel free to make

other suggestions if you think your suggestion can be a better solution.

[Daniel Tabuenca]

Directives in a section of the dom are not applied unless the dom is run through a $compile and then llinked. What you could do is inject the $compile service and call it on the html once the html is loaded. Unfortunately, while $.colorbox plugin gives you a callback when the content is loaded, it doesn’t really provide you with the dom of the content, so you probably have to resort to querying it from the top of the dom. For example:

app.directive('colorbox', function($compile, $rootScope){
  return {
    link: function(scope, element, attrs){
      element.click('bind', function(){
        $.colorbox({
          href: attrs.colorbox,
          onComplete: function(){
            $rootScope.$apply(function(){
              var content = $('#cboxLoadedContent');
              $compile(content)($rootScope);      
            })
          }
        });
      });
    }
  };
});

See this plunkr for an example:

http://plnkr.co/edit/FAbNu8sLg6hZsI5in30K

Let me know if you have questions.

[Jake K.]

Hello,

I am writing a piece of code that does the following:

- Allow the user to enter input

- Then the input  will call a 'search' function that does a search on a database based on the input word.

- I want to allow the method to be called, say 1500 milliseconds after the user has input text, to give time to

enter at least a full word ( e.g. 'Joe' instead of 'J', 'Monica' instead of 'M').

I am having trouble setting up a timer to capture the 'final' input. When I use $timeout inside a watch it doesnt work the

way I want since it displays all the inputs after n seconds.

So, if I exec the following code ( and assuming the user inputs 'hello' )

$scope.$watch( 'input_value', function( userinput ){

  $timeout( function(){

     console.log( userinput );

  , 1500 )

});

after 1500 milliseconds, the console.log would output:

h

he

hel

hell

hello

but what I want to do is to capture the 'final' value of 'userinput' after 1500 ( so whatever the user has input after 1500 milliseconds, without tracking the previous input ).

How can I do this?

Thanks

PS: feel free to give better suggestions if you have one

2014/1/6 Daniel Tabuenca <dtab...@gmail.com>

--

You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/9LOB2A1ZUoM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

--
JAKE KWON +1 (604) 655 3109
email: jyk...@gmail.com