0

I'm rephrasing my question after reading awesome post provided by @charlietfl. And tried to remove jquery, as possible

There are couple of issues which I'm not able to get rid off.

  1. How to use angular modules on Parse Cloud.
  2. Since I don't know how to use Angular on Parse Cloud, I'm not able to create template which I can dynamically load.

So, to work around my 2nd issue, I've no option other than replacing the DOM dynamically(which is bad, I know). There is another requirement, with each div, I want menu to pop-up when user long-presses the div.

So for that I've created another directive long-press and passing it with the DOM.

This is getting loaded from Parse Cloud Server

for (task in subTasks) {

    var subTaskObj = subTasks[task];
    var taskTitle = subTaskObj.title;
    var taskStatus = subTaskObj.status;
    // Here I'm passing long-press directive
    taskDOM += '<div class="oaerror danger" long-press>' +
        '<div class="col-xs-11"><strong>' + taskTitle + '</strong></div>' +
        '<div class="col-xs-1 pull-right"><img src="images/volunteer-task.png"></div>' +
        '<div class="clearfix"></div>' +
        '</div>';
}

tg-dynamic directive

angular.module('DWrapper.directives')
.directive('tgDynamic', function($compile, WidgetService) {
    return {
        restrict: 'E',
        scope: {
            groupWidget: '@'
        },
        template: '<div/>',
        replace: true,
        link: function(scope, ele, attr) {

            scope.$watch('groupWidget', function(newVal) {
                if (newVal) {
                    widgetService.getWidgetTemplate({"groupWidgetId": newVal })
                        .then(function(widgetResponse) {
                            var template = widgetResponse.data.result.template;
                            $(ele).html($compile(template)(scope));                                
                        });
                }
            });
        }
    };
});

After adding content dynamically

In the image, scope is available only on the root element, and not on long-press directive So, how to inject scope, for the dynamically added long-press directive to work.

Tushar
  • 1,115
  • 1
  • 10
  • 26
  • 2
    why are you using jQuery to inject html ? Approach would be a lot simpler if you update data model not the DOM. Strongly suggest you read : [thinking-in-angularjs-if-i-have-a-jquery-background](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) – charlietfl Jun 02 '15 at 11:39
  • @charlietfl what ur said is correct, but with Parse and also my requirement is such that, I've to load the html dynamically. Everything must come from server. So pls tell me wats the work-around for that dynamically added directive. – Tushar Jun 03 '15 at 10:13
  • doesn't matter if you are using Parse or any other API , approach is still the same, you update your data model with response and let angular generate the view based on model – charlietfl Jun 03 '15 at 10:18
  • can u provide me an example, where should i make the code change – Tushar Jun 03 '15 at 10:32

0 Answers0