2015-07-21 1 views
0

Эй, ребята, я планировал директиву, которую я делал, что по существу было бы всплывающим меню с таймером на нем. В основном план состоял в том, чтобы передать объект, который мог бы настроить свойства для построения сообщения. Директива будет содержать html-шаблон, и мы добавим сообщение/html на основе свойств, установленных в службе. Для примера:

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

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

Popup.pop(obj); 

и т.д. Суть вопроса является $rootScope таймер должен тикать вниз (что просто сделать в контроллере), но директива устанавливает HTML в виде строки, если интерполированное и не будет обновлять если я прав. Мой вопрос заключается в том, как получить директиву для отображения таймера в директиве. мне нужно будет использовать $compile в directive? если да, то как? Кроме того, как мне передать функцию ng-click из этой службы, если мне когда-нибудь понадобится? Извините, если его запутанные PLS задают вопросы.

+0

нужно ли всплывающий быть везде? Я бы определенно пошел с сервисом типа alertPopUpService, который будет управлять всплывающими окнами вместо директивы. – Okazari

+0

Да, хотя, хотя это так, но, к сожалению, оно должно быть везде. Допустим, нам пришлось сделать это через директиву – Indrick

+0

. На самом деле я не думаю, что это хорошая утилита для директивы. Я попробую пример с сервисом, если он не подходит, я вернусь к директивному. (Если никто не ответил раньше) – Okazari

ответ

0

Попробуйте

//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>

Смежные вопросы