Add custom directive on html page with Jquery

JORDY David

unread,

Oct 2, 2014, 10:19:31 AM10/2/14

to ang...@googlegroups.com

Hi,

I created a directive:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
angular.module('TEST').directive('helloWorld', function() {
        return {
            scope:{
                name : '=',         
                nameStatic : '@', 
                select : '&'        
            },
            restrict: 'AEC',
            replace: 'true',
            template: '<p ng-click="select()">Hello World!! {{name}} {{nameStatic}}</p>',
            link: function(scope, element, attributs){
                console.log(attributs.nameStatic);
            }
        };
    });

I would like with Jquery add this directive in page html page

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$("body").append("<hello-world name-static='Parametre statique' select='testDirective()' id='screenshot'/>");

I know I have to avoid to mix angularjs and Jquery but I am doing a migration.

How can I do ?

Thanks in advance

korneliusz wilgocki

unread,

Oct 2, 2014, 10:22:10 AM10/2/14

to ang...@googlegroups.com

Why with jQuery ?

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, 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/d/optout.

JORDY David

unread,

Oct 2, 2014, 10:24:06 AM10/2/14

to ang...@googlegroups.com

Because I worked with this library. If you have an alternative in Javascript (vanilla), I am ok as well

korneliusz wilgocki

unread,

Oct 2, 2014, 10:28:35 AM10/2/14

to ang...@googlegroups.com

So you have some action which append html to body, yes ?

You have to $compile directive

http://stackoverflow.com/questions/11771513/angularjs-jquery-how-to-get-dynamic-content-working-in-angularjs

--

JORDY David

unread,

Oct 3, 2014, 2:19:42 AM10/3/14

to ang...@googlegroups.com

I am really lost, do you have an example a fiddler ?

korneliusz wilgocki

unread,

Oct 3, 2014, 4:04:03 AM10/3/14

to ang...@googlegroups.com

<!doctype html>

<head>

</head>

</body>

</html>

angular.module('app', [])

.controller('MyController', ['$scope', function($scope {

$scope.test = 'test';

}])

.directive('helloWorld', function() {

return {

scope:{

nameStatic : '@',

select : '&'

},

restrict: 'E',

replace: 'true',

template: '<p ng-click="select()">Hello World!! {{nameStatic}}</p>',

link: function(scope, element, attributs){

console.log(attributs.nameStatic);

}

};

});

var element = "<hello-world name-static='Parametre statique' select='testDirective()' id='screenshot'></hello-world>";

$('body').append(element);

var scope = angular.element('body').scope();

scope.$apply();

</script>

JORDY David

unread,

Oct 3, 2014, 4:33:04 AM10/3/14

to ang...@googlegroups.com

Thanks for your help.

Meanwhile I had converted all my jquery event logic to angular on my Controller.

 $scope.onMouseEnter = function ($event) {
        var coords = getMouseEventResult($event, "Mouse move");

        var newElement = $compile('div id="screenshot"> <muse:hello-world name-static="Parametre statique2" select="testDirective()"/></div>')($scope);
        angular.element(document.body).append(newElement);
    };

But nothing happens. What I have forgotten ?

JORDY David

unread,

Oct 3, 2014, 5:18:09 AM10/3/14

to ang...@googlegroups.com

Ok I found

var newElement = $compile('<div id="screenshot"> <muse:hello-world name="row.Name" name-static="Parametre statique" select="testDirective()"/></div>')($scope);
        angular.element(document.body).append(newElement);