Add angular directive on js

Question

I have simple directive:

var goodsProperties = angular.module('goodsProperties', []);

goodsProperties.directive('showGoodsProperties', function() {    
    var directive = {
        priority: 0,
        template: '<h1>Hello World</h1>',
        replace: false,
        transclude: false,
        restrict: 'C'
    };

    return directive;
});

And html for it's:

<div ng-app="goodsProperties">
    <div class="showGoodsProperties"></div>
</div>

And i want add element dynamic on Javascript. Full code see at http://jsfiddle.net/ZvPmh/5/

I have function addClick(), what add new tag with directive class.

If i call addClick() in body, all work fine. But if i call addClick() on a-tag, angular don't see new element like directive.

If i call addClick() in body, all work fine. But if i call addClick() on a-tag Can you explain? — Maxim Shoustin
– Maxim Shoustin, Commented Oct 8, 2013 at 9:31
If i add <div class="showGoodsProperties"> in <script> angular see it's. But if i have <a onclick="addClick"></a>, and this tag add <div>, angular don't see it's. — Hello
– Hello, Commented Oct 8, 2013 at 9:43

Ivan Chernykh · Accepted Answer · 2013-10-08 09:35:30Z

3

Stay in "Angular world". Use Controllers to control your stuff. Define a controller like this:

var Ctrl = function($scope){
    $scope.divs = [{}];
    $scope.add = function(){
        this.divs.push({});
    }
}

And use it with your markup like this:

<div ng-app="goodsProperties" ng-controller="Ctrl">
    <a href="#" ng-click="add()">add</a>
    <div ng-repeat="div in divs" class="showGoodsProperties"></div>
</div>

Working example: http://jsfiddle.net/ZvPmh/7/

answered Oct 8, 2013 at 9:35

Ivan Chernykh

42.2k13 gold badges136 silver badges149 bronze badges

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

2 Comments

Hello Over a year ago

Thanks, but i can't use it, all HTML generated by ExtJS. And if i add ng-controller i have same problem, angular don't know about new controller.

Ivan Chernykh Over a year ago

@Hello may be you could change some ExtJS settings?

Collectives™ on Stack Overflow

Add angular directive on js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related