use angular bootstrap modal for insert link

[atahani]

i want use from angularjs bootstrap modal for insert link , so in textAngularSetup.js file include $modal as dependency, and use it in insertLink action function:

taRegisterTool('insertLink',{
        tooltiptext: taTranslations.insertLink.tooltip,
        iconclass: 'icon-link',
        action: function(){
            var that=this;
            var result={
                texttodisplay:'ahmad',
                webaddress:'',
                isOk:''
            }
            var insertLinkmodalScope=$rootScope.$new();
            insertLinkmodalScope.modalInstance=$modal.open({
                templateUrl: 'editor/views/insertlink.client.view.html',
                controller: 'EditorController',
                size: 'sm',
                scope:insertLinkmodalScope,
                resolve:{
                            //pass result to modal
                    link:function(){
                        return result;
                    }
                }
            });
            //define result modal , when user complete result information 
            insertLinkmodalScope.modalInstance.result.then(function(result){
                if (result.isOk) {
                    return that.$editor().wrapSelection('createLink', result.webaddress, true);
                }
            });

        },
       activeState: ....,
       onElementSelect: ....
});

when i debug code in chrome, find out the command executed but didn't affect in HTML editor.
is any way to use from bootstrap modal for inset link ?

[SimeonC]

Hi, two things you need for this are the actions promise and to specifically return false.

Looks like this:

taRegisterTool('insertLink',{
        tooltiptext: taTranslations.insertLink.tooltip,
        iconclass: 'icon-link',
        action: function(promise, restoreSelection){
            ... // removed for brevity
            //define result modal , when user complete result information 
            insertLinkmodalScope.modalInstance.result.then(function(result){
                if (result.isOk) {
                    restoreSelection(); // selection will be lost in the modal interaction - you need to have rangy core and rangy saveselection enabled, or the minified rangy bundle from the repo
                    that.$editor().wrapSelection('createLink', result.webaddress, true);
                    promise.resolve(); // this tells the editor you're done and bindings should be updated now
                }
            });
            return false;
        },
       activeState: ....,
       onElementSelect: ....
});

[mangrovestudios]

Using modals end to end, how would the modal work in the onElementSelect block? I tried this:

reLinkButton.on('click', function(event){
   event.preventDefault();

   var modalInstance = $modal.open({
      templateUrl : '/templates/dialog/linkMaker.html',
      controller  : 'linkMakerDlgCtrl',
      resolve     : {
         // variables here ...
         }
      }
   });
   modalInstance.result.then(function (link) {

     $element.attr('href', 'http://' + link.ref);
     editorScope.updateTaBindtaTextElement();

   }, function () { $log.debug('Modal dismissed'); });

   editorScope.hidePopover();
});

Does it also need the promise and return false? The problem with the above appears to be with editorScope.updateTaBindtaTextElement(); in that the $element attribute is set but not applied to DOM.

[nickknissen]

mangrovestudios please create a new issue.

[oscar-g]

A quick question on your code, @atahani

How or where does the $modal service get injected?
Do you inject $modal in the $run function that contains the calls to taRegisterTool?
Or do you inject $modal in the module declaration line angular.module('textAngularSetup', [])?

Thanks so much!

[oscar-g]

To answer my own question, if anyone was wondering, it seems to work by injecting $modal in the $run function.

[deepak-manwal]

Hi @SimeonC i want your help i am also facing same problem but its not working with modal. Do you have any demo of this solved issue.

[oscar-g]

@deepak-manwal did you try injecting $modal in the run method of textAngularSetup angular module in textAngularSetup.js?

[moorthi07]

Hi @SimeonC, @atahani do you see why - this.$editor(). throws an undefined error inside mddialog resolve (.then) unlike the above mentioned modal example. Thanks.

taRegisterTool('insertImage1',{
iconclass: 'fa fa-picture-o',
action: function(taRegisterTool, taOptions){

         $mdDialog.show({  
      template: dialogContent,
      controller: DialogControllerTA, 
      locals: { info: info1 }
    }).then(function(info) {
        if(info) { 
            if(imageLink && imageLink !== '' && imageLink !== 'http://'){
                console.log('imageLink= '+imageLink);
            this.$editor().wrapSelection('insertImage1', imageLink, true);
        }
            console.log('then  info.userName= '+info.userName);
        }
      }); 
       function DialogControllerTA($scope, $mdDialog,info) {
            $scope.info = info;
             console.log('info.user -:'+ info.userName);
$scope.vm = {
  userName: info.userName
}; 
$scope.process = function(success, form, info) {
  var ret = false;
  if(success) {
    if(form.$invalid) return;
      info1=info;
       console.log('info.user1 -:'+ info.userName);
    ret = info;
  }
  $mdDialog.hide(ret);
};
    $scope.hide = function() {
$mdDialog.hide();

};
$scope.cancel = function() {
$mdDialog.cancel();
};
$scope.answer = function(answer) {
$mdDialog.hide(answer);
};};
return false;

    },
    onElementSelect: {
        element: 'img',
        action: taToolFunctions.imgOnSelectAction
    }
});