角度指令范围误解

Question

好吧，我想创建一个“summernote”指令（所见即所得编辑器）。

这是模板：

<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('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');
              };
       }
    }
});

当我点击保存按钮时，我想发送一些数据，所以我在mainController上声明了saveData，但我必须发送div.summernote数据，我不知道该怎么做

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

主控制器：

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

主要问题是，如何使用不同的？范围。问题是我想分离指令逻辑（编辑、取消、div.summernote 行为）和“保存”按钮，其逻辑在 MainController（或主 $scope，这是我的烂摊子）中声明。

链接函数的$scope和MainController $scope一样吗？？

我想我对这一切有点混乱，所以任何帮助（文档）都将不胜感激。

Answer 1

文档可在此处directives 和此处compile 找到。

Replace: true，将用模板替换您附加指令的元素，因为在您的情况下，您的模板似乎与您不需要的代码内联（也将在下一个专业中删除角度释放）。

问题 1：您不需要绑定 $on 事件 ng-click 应该可以正常工作。

如果你想在你的控制器中定义你的保存函数，你可以将你的函数作为一个属性传递并在你的指令中定义的保存例程中调用它：

在您的 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>

在你的指令中：

   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);
   };
   ...
  }