$compile in Directives

Question

Hey guys i was planning out a directive i was making which would essentially be a popup with a timer on it. Basically the plan was to pass in an object which could configure the properties to construct the message. The directive would contain the html template and we would append the message/html based on the properties set in a service. For Example:

$rootScope.timer = 'recursive time fn goes here'

obj = {
message : '<span ng-click="connect()">Custom message goes here {{ timer }} </span>'
}

Popup.pop(obj);

etc. The point of the question is the $rootScope timer needs to tick down (which is simple to do in a controller) but the directive sets html as a string if interpolated and will not update the value if i'm correct. My question is how do i get the directive to render the timer ticking down inside the directive. would i need to use $compile in the directive? if so how? Furthermore how would i pass an ng-click function from this service if i ever needed one? Sorry if its confusing pls ask questions.

Does the popup need to be everywhere ? I would definitly go with a service like "alertPopUpService" which will manage the pop-ups instead of a directive. — Okazari, Jul 21 '15 at 13:19
yeah i though so but it does need to be everywhere unfortunately. Lets say we had to do i through a directive — Indrick, Jul 21 '15 at 13:27
I actually don't think this is a good usecase for a directive. I'll try an exemple with a service, if it doesn't fit i'll go back to the directive one. (If nobody answered before) — Okazari, Jul 21 '15 at 13:32
http://plnkr.co/edit/Fmhs6Dj8ozq1v1oTJGHG?p=preview Here is a tiny exemple with using a Service. you just need to bind the alerts in a controller (the main one) and add a ng-repeat on his boddy with some CSS and that's all. — Okazari, Jul 21 '15 at 14:10

score 0 · Answer 1 · answered Jul 21 '15 at 13:36

Try this

//you can add your custom messge and time function returning value to the way u want 

// this is the basic way to do
var testing = angular.module('testing', [])

testing.directive('mydir', function ($compile, $rootScope) {
    
    var template = '<span ng-click="connect()">custom message</span>'
    return {

        restrict: 'E',

        link: function (scope, ele, attribute) {


            scope.connect = function () {

                alert('popup' +  new Date().getTime());
            }
            var content = $compile(template)(scope);

            ele.append(content)


        }

    }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
    <div ng-app="testing">


        <mydir></mydir>
    </div>

</body>

$compile in Directives

1 Answers1