CODEWITHSUNDEEP
angularjsscope
Ulrira
Ulrira

Reputation: 219

angular directive scope missunderstanding

Well, I want to create a "summernote" directive (wysiwyg editor).

This is the template:

<summernote active="false">
    <button class="edit" ng-click="edit()">Edit</button>
    <button class="save" ng-click="saveData()">Save</button>
    <button class="cancel" ng-click="cancel()">Cancel</button>
    <div class="summernote"></div> // here will be loaded the summernote script
</summernote>

Directive code:

...
.directive('summernote', function($compile) {
    return {
       restrict: 'E',
       replace: true, // Not sure about what this code does,
       scope: {
          active: '='
       },
       link: function($scope, elem, attrs) {
          var $summernote = elem.find('.summernote'),
              $edit = elem.find('.edit'),
              $save = elem.find('.save'),
              $cancel = elem.find('.cancel');

              $scope.active = false;

              $scope.$watch('active', function(active) {
                   // switch summernote's & buttons' state
                   // code ...
              });

              // here I have the buttons' click event defined
              // QUESTION 1: Is there a better way?
              // I'm doing this because the code below is not working.

              $edit.on('click', function() {...});
              $cancel.on('click', function() {...});
              $save.on('click', function() {...});

              // THIS IS NOT WORKING...
              $scope.edit = function() {
                   alert('edit');
              };

              $scope.cancel = function() {
                   alert('cancel');
              };
       }
    }
});

When I click save button, I want to send some data, so I have declared saveData on the mainController, but I have to send the div.summernote data and I don't know how to do

<button class="save" ng-click="saveData(getSummernoteDataFromDirectiveScope?)">Save</button>

MainController:

.controller('MainController', function($scope, myDataFactory) {
     $scope.saveSummernoteData(data) {
          myDataFactory.updateData('field_name', data);
     }
}

The main question is, how to works with different? scopes. The thing is that I want to separate the directive logic (edit, cancel, div.summernote behaviour), and the "save" button, which its logic is declared in the MainController (or main $scope, here is my mess).

Are the $scope of the link function and the MainController $scope the same??

I think I have a little mess with all of this, so any help (documentation) would be appreciated.

Upvotes: 0

Views: 495

Answers (1)

Wawy
Wawy

Reputation: 6269

Documentation can be found here directives and here compile.

Replace: true, would replace the element you have attached the directive to with your template, because in your case your template seems to be inline with the code you don't need that (also it will be removed in the next major release of angular).

Question 1: You shouldn't need to bind $on events ng-click should just work.

If you want to define your save function inside your controller you can pass your function as an attribute and call it inside your save routine defined in your directive:

In your html:

<summernote active="false" on-save="saveData()">
    <button class="edit" ng-click="edit()">Edit</button>
    <button class="save" ng-click="save()">Save</button>
    <button class="cancel" ng-click="cancel()">Cancel</button>
    <div class="summernote"></div> // here will be loaded the summernote script
</summernote>

Inside your directive:

   scope: {
     active: '=',
     invokeOnSave: '&onSave'
   },

  link: function($scope, elem, attrs) {
   ...
   $scope.save = function() {
     var data = "some data"; //Whatever mechanism you use to extract the data from your div
     $scope.invokeOnSave(data);
   };
   ...
  }

Upvotes: 1

Related Questions