Javascript AngularJS'；不可知论者'；和'；组件'；指令

最近，我和我的同事就AngularJS中最灵活的指令使用方式发生了一场暴力纠纷。经过长时间、精疲力尽的讨论，我们同意请一个社区来评判我们的争吵。请帮助我们：）

如果简单地说一下，我坚信要使某些东西真正具有灵活性，就应该遵循MVC的主要原则——严格地将逻辑与表示分离，而不管我们拥有什么样的“范围”。使用任何MVC框架都是一种更好的方法。我的同事不同意我的观点，并且坚信AngularJS中的指令对于AngularJS来说是非常“特殊”的，并且只有当它在“板”中包含所有内容时才有效，比如模板+自己的控制器。他还声称在指令范围内直接操纵DOM是很好的，所有的“指令”都应该以这种方式工作

我们想实现“就地”实体编辑功能。它应该以以下方式工作-用户只需单击某些“文本”，就可以更改其值

我建议采取以下方法：

模板（text editor.html）：

<label class="title">{{title}}</label>
<span class="value" ng-show="!editor.edited[name]" ng-click="editor.activateEditing(name)">{{editor.entity[name]}}</span>
<input ng-show="editor.edited[name]" ng-model="editor.entity[name]" ng-change="editor.validate(name)"></input> 

function editorController ($scope, $controller) {
    function copy (source) {
      var result = {};
      for (var prop in source) {
        if (source.hasOwnProperty(prop) && prop.charAt(0) !== '_') {
          result[prop] = source[prop];
        }
      }

      return result;
    }

    $scope.edited = {};

    $scope.activateEditing = function (name) {
      var entity = $scope.entity;

      $scope.edited[name] = true;

      if (!entity._backup) {
        entity._backup = copy(entity);
      }
    };

    $scope.cancelEditing = function () {
      var entity = $scope.entity, backup = entity._backup;
      for (var prop in backup) {
        if (backup.hasOwnProperty(prop)) {
          entity[prop] = backup[prop];
        }
      }

      delete entity._backup;
      $scope.edited = {};
    };

    $scope.saveEditing = function () {
      var entity = $scope.entity, backup = entity._backup;
      $scope.$emit('saveEntity', entity, backup);

      delete entity._backup; 
      $scope.edited = {};
    };

    $scope.deleteEntity = function () {
      var entity = $scope.entity;
      $scope.$emit('deleteEntity', entity);

      delete entity._backup; 
      $scope.edited = {};
    };

    $scope.$on('trackEntity', function (event, entity) {
      $scope.entity = entity;
      $scope.edited = {};
    });
  }

  editorController.$inject = ['$scope', '$controller'];
  app.controller('EditorCtrl', editorController);

function textEditor() {
    return {
      scope: {
        title: '=',
        name: '=',
        editor: '='
      },
      templateUrl: 'partials/text-editor.html',
    };
  }

  app.directive('textEditor', textEditor);

<div ng-controller="EditorCtrl">
  <div class="stack-item" ng-if="show">
    <div class="stack-item-header" ng-include="'partials/section-header.html'"></div>

    <div class="details-menu">
      <div class="details-actions">
        <div class="details-edit-actions">
          <a ng-click="saveEditing()"><span class="icon-save"></span>Save</a>
          <a ng-click="cancelEditing()"><span class="icon-cancel"></span>Cancel</a>
        </div>
      </div>
    </div>

    <div class="details">
      <fieldset>
        <legend>Medication</legend>
        <div text-editor title="'Drug Name'" name="'drugName'" editor="this"></div>
        <div text-editor title="'Dosage'" name="'dosage'" editor="this"></div>
      </fieldset>
    </div>
  </div>
</div>

<div content-link>
  <a link ng-bind="case.info.caseName"></a>
  <input content ng-model="case.info.caseName" />
</div>

(function () {
    'use strict';

    angular
        .module('xx')
        .directive('contentLink', contentLink)

    contentLink.$inject = ['$compile'];
    function contentLink($compile) {
        var directive = {
            restrict: 'A',
            transclude: true,
            scope: {
                contentActive: '=?'
            },
            link: link,
            controller: ContentLinkController,
            controllerAs: 'contentLink',
            template: '<div class="cl-link" ng-hide="contentLink.contentActive" ng-click="contentLink.toggleContent()"></div>' +
                      '<div class="cl-content" ng-show="contentLink.contentActive" outside-click="contentLink.toggleContent()" outside-if="contentLink.contentActive" ' +
                            'ignore-element-selectors="{{ contentLink.otherContentElements }}">' +
                      '</div>'
        };

        return directive;

        function link(scope, element, attrs, controller, transclude) {
            angular.extend(scope.contentLink, {
                toggleContent: toggleContent
            });

            element.removeAttr('content-link').addClass('content-link');

            transclude(scope.$parent, function (clone, innerScope) {
                clone.filter('[link]').removeAttr('link').appendTo(element.find('.cl-link'));
                clone.filter('[content]').removeAttr('content').appendTo(element.find('.cl-content'));
            });

            var deregisterScopeDestroyListener = scope.$on('$destroy', cleanup);

            function toggleContent() {
                scope.contentActive = scope.contentLink.contentActive = !scope.contentLink.contentActive;

                element.toggleClass('content-active', scope.contentLink.contentActive);
            }

            function cleanup() {
                scope.contentLink = null;
                deregisterScopeDestroyListener();
            }
        }
    }

    ContentLinkController.$inject = ['$scope', '$element', '$attrs'];
    function ContentLinkController($scope, $element, $attrs) {
        var vm = this;

        angular.extend(vm, {
            contentActive: $scope.contentActive || false,
            otherContentElements: $attrs.otherContentElements
        });
    }
})();

指令：

<label class="title">{{title}}</label>
<span class="value" ng-show="!editor.edited[name]" ng-click="editor.activateEditing(name)">{{editor.entity[name]}}</span>
<input ng-show="editor.edited[name]" ng-model="editor.entity[name]" ng-change="editor.validate(name)"></input> 

function editorController ($scope, $controller) {
    function copy (source) {
      var result = {};
      for (var prop in source) {
        if (source.hasOwnProperty(prop) && prop.charAt(0) !== '_') {
          result[prop] = source[prop];
        }
      }

      return result;
    }

    $scope.edited = {};

    $scope.activateEditing = function (name) {
      var entity = $scope.entity;

      $scope.edited[name] = true;

      if (!entity._backup) {
        entity._backup = copy(entity);
      }
    };

    $scope.cancelEditing = function () {
      var entity = $scope.entity, backup = entity._backup;
      for (var prop in backup) {
        if (backup.hasOwnProperty(prop)) {
          entity[prop] = backup[prop];
        }
      }

      delete entity._backup;
      $scope.edited = {};
    };

    $scope.saveEditing = function () {
      var entity = $scope.entity, backup = entity._backup;
      $scope.$emit('saveEntity', entity, backup);

      delete entity._backup; 
      $scope.edited = {};
    };

    $scope.deleteEntity = function () {
      var entity = $scope.entity;
      $scope.$emit('deleteEntity', entity);

      delete entity._backup; 
      $scope.edited = {};
    };

    $scope.$on('trackEntity', function (event, entity) {
      $scope.entity = entity;
      $scope.edited = {};
    });
  }

  editorController.$inject = ['$scope', '$controller'];
  app.controller('EditorCtrl', editorController);

function textEditor() {
    return {
      scope: {
        title: '=',
        name: '=',
        editor: '='
      },
      templateUrl: 'partials/text-editor.html',
    };
  }

  app.directive('textEditor', textEditor);

<div ng-controller="EditorCtrl">
  <div class="stack-item" ng-if="show">
    <div class="stack-item-header" ng-include="'partials/section-header.html'"></div>

    <div class="details-menu">
      <div class="details-actions">
        <div class="details-edit-actions">
          <a ng-click="saveEditing()"><span class="icon-save"></span>Save</a>
          <a ng-click="cancelEditing()"><span class="icon-cancel"></span>Cancel</a>
        </div>
      </div>
    </div>

    <div class="details">
      <fieldset>
        <legend>Medication</legend>
        <div text-editor title="'Drug Name'" name="'drugName'" editor="this"></div>
        <div text-editor title="'Dosage'" name="'dosage'" editor="this"></div>
      </fieldset>
    </div>
  </div>
</div>

<div content-link>
  <a link ng-bind="case.info.caseName"></a>
  <input content ng-model="case.info.caseName" />
</div>

(function () {
    'use strict';

    angular
        .module('xx')
        .directive('contentLink', contentLink)

    contentLink.$inject = ['$compile'];
    function contentLink($compile) {
        var directive = {
            restrict: 'A',
            transclude: true,
            scope: {
                contentActive: '=?'
            },
            link: link,
            controller: ContentLinkController,
            controllerAs: 'contentLink',
            template: '<div class="cl-link" ng-hide="contentLink.contentActive" ng-click="contentLink.toggleContent()"></div>' +
                      '<div class="cl-content" ng-show="contentLink.contentActive" outside-click="contentLink.toggleContent()" outside-if="contentLink.contentActive" ' +
                            'ignore-element-selectors="{{ contentLink.otherContentElements }}">' +
                      '</div>'
        };

        return directive;

        function link(scope, element, attrs, controller, transclude) {
            angular.extend(scope.contentLink, {
                toggleContent: toggleContent
            });

            element.removeAttr('content-link').addClass('content-link');

            transclude(scope.$parent, function (clone, innerScope) {
                clone.filter('[link]').removeAttr('link').appendTo(element.find('.cl-link'));
                clone.filter('[content]').removeAttr('content').appendTo(element.find('.cl-content'));
            });

            var deregisterScopeDestroyListener = scope.$on('$destroy', cleanup);

            function toggleContent() {
                scope.contentActive = scope.contentLink.contentActive = !scope.contentLink.contentActive;

                element.toggleClass('content-active', scope.contentLink.contentActive);
            }

            function cleanup() {
                scope.contentLink = null;
                deregisterScopeDestroyListener();
            }
        }
    }

    ContentLinkController.$inject = ['$scope', '$element', '$attrs'];
    function ContentLinkController($scope, $element, $attrs) {
        var vm = this;

        angular.extend(vm, {
            contentActive: $scope.contentActive || false,
            otherContentElements: $attrs.otherContentElements
        });
    }
})();

用法：

<label class="title">{{title}}</label>
<span class="value" ng-show="!editor.edited[name]" ng-click="editor.activateEditing(name)">{{editor.entity[name]}}</span>
<input ng-show="editor.edited[name]" ng-model="editor.entity[name]" ng-change="editor.validate(name)"></input> 

function editorController ($scope, $controller) {
    function copy (source) {
      var result = {};
      for (var prop in source) {
        if (source.hasOwnProperty(prop) && prop.charAt(0) !== '_') {
          result[prop] = source[prop];
        }
      }

      return result;
    }

    $scope.edited = {};

    $scope.activateEditing = function (name) {
      var entity = $scope.entity;

      $scope.edited[name] = true;

      if (!entity._backup) {
        entity._backup = copy(entity);
      }
    };

    $scope.cancelEditing = function () {
      var entity = $scope.entity, backup = entity._backup;
      for (var prop in backup) {
        if (backup.hasOwnProperty(prop)) {
          entity[prop] = backup[prop];
        }
      }

      delete entity._backup;
      $scope.edited = {};
    };

    $scope.saveEditing = function () {
      var entity = $scope.entity, backup = entity._backup;
      $scope.$emit('saveEntity', entity, backup);

      delete entity._backup; 
      $scope.edited = {};
    };

    $scope.deleteEntity = function () {
      var entity = $scope.entity;
      $scope.$emit('deleteEntity', entity);

      delete entity._backup; 
      $scope.edited = {};
    };

    $scope.$on('trackEntity', function (event, entity) {
      $scope.entity = entity;
      $scope.edited = {};
    });
  }

  editorController.$inject = ['$scope', '$controller'];
  app.controller('EditorCtrl', editorController);

function textEditor() {
    return {
      scope: {
        title: '=',
        name: '=',
        editor: '='
      },
      templateUrl: 'partials/text-editor.html',
    };
  }

  app.directive('textEditor', textEditor);

<div ng-controller="EditorCtrl">
  <div class="stack-item" ng-if="show">
    <div class="stack-item-header" ng-include="'partials/section-header.html'"></div>

    <div class="details-menu">
      <div class="details-actions">
        <div class="details-edit-actions">
          <a ng-click="saveEditing()"><span class="icon-save"></span>Save</a>
          <a ng-click="cancelEditing()"><span class="icon-cancel"></span>Cancel</a>
        </div>
      </div>
    </div>

    <div class="details">
      <fieldset>
        <legend>Medication</legend>
        <div text-editor title="'Drug Name'" name="'drugName'" editor="this"></div>
        <div text-editor title="'Dosage'" name="'dosage'" editor="this"></div>
      </fieldset>
    </div>
  </div>
</div>

<div content-link>
  <a link ng-bind="case.info.caseName"></a>
  <input content ng-model="case.info.caseName" />
</div>

(function () {
    'use strict';

    angular
        .module('xx')
        .directive('contentLink', contentLink)

    contentLink.$inject = ['$compile'];
    function contentLink($compile) {
        var directive = {
            restrict: 'A',
            transclude: true,
            scope: {
                contentActive: '=?'
            },
            link: link,
            controller: ContentLinkController,
            controllerAs: 'contentLink',
            template: '<div class="cl-link" ng-hide="contentLink.contentActive" ng-click="contentLink.toggleContent()"></div>' +
                      '<div class="cl-content" ng-show="contentLink.contentActive" outside-click="contentLink.toggleContent()" outside-if="contentLink.contentActive" ' +
                            'ignore-element-selectors="{{ contentLink.otherContentElements }}">' +
                      '</div>'
        };

        return directive;

        function link(scope, element, attrs, controller, transclude) {
            angular.extend(scope.contentLink, {
                toggleContent: toggleContent
            });

            element.removeAttr('content-link').addClass('content-link');

            transclude(scope.$parent, function (clone, innerScope) {
                clone.filter('[link]').removeAttr('link').appendTo(element.find('.cl-link'));
                clone.filter('[content]').removeAttr('content').appendTo(element.find('.cl-content'));
            });

            var deregisterScopeDestroyListener = scope.$on('$destroy', cleanup);

            function toggleContent() {
                scope.contentActive = scope.contentLink.contentActive = !scope.contentLink.contentActive;

                element.toggleClass('content-active', scope.contentLink.contentActive);
            }

            function cleanup() {
                scope.contentLink = null;
                deregisterScopeDestroyListener();
            }
        }
    }

    ContentLinkController.$inject = ['$scope', '$element', '$attrs'];
    function ContentLinkController($scope, $element, $attrs) {
        var vm = this;

        angular.extend(vm, {
            contentActive: $scope.contentActive || false,
            otherContentElements: $attrs.otherContentElements
        });
    }
})();

拯救
取消
药物

验证函数超出了我们讨论的范围，它是以某种方式在范围中定义的

正如你们所看到的，我的指令是完全不可知的——它只用于模板，并为模板提供一些额外的参数

我的同事提出了其他解决方案：

用法示例：

<label class="title">{{title}}</label>
<span class="value" ng-show="!editor.edited[name]" ng-click="editor.activateEditing(name)">{{editor.entity[name]}}</span>
<input ng-show="editor.edited[name]" ng-model="editor.entity[name]" ng-change="editor.validate(name)"></input> 

function editorController ($scope, $controller) {
    function copy (source) {
      var result = {};
      for (var prop in source) {
        if (source.hasOwnProperty(prop) && prop.charAt(0) !== '_') {
          result[prop] = source[prop];
        }
      }

      return result;
    }

    $scope.edited = {};

    $scope.activateEditing = function (name) {
      var entity = $scope.entity;

      $scope.edited[name] = true;

      if (!entity._backup) {
        entity._backup = copy(entity);
      }
    };

    $scope.cancelEditing = function () {
      var entity = $scope.entity, backup = entity._backup;
      for (var prop in backup) {
        if (backup.hasOwnProperty(prop)) {
          entity[prop] = backup[prop];
        }
      }

      delete entity._backup;
      $scope.edited = {};
    };

    $scope.saveEditing = function () {
      var entity = $scope.entity, backup = entity._backup;
      $scope.$emit('saveEntity', entity, backup);

      delete entity._backup; 
      $scope.edited = {};
    };

    $scope.deleteEntity = function () {
      var entity = $scope.entity;
      $scope.$emit('deleteEntity', entity);

      delete entity._backup; 
      $scope.edited = {};
    };

    $scope.$on('trackEntity', function (event, entity) {
      $scope.entity = entity;
      $scope.edited = {};
    });
  }

  editorController.$inject = ['$scope', '$controller'];
  app.controller('EditorCtrl', editorController);

function textEditor() {
    return {
      scope: {
        title: '=',
        name: '=',
        editor: '='
      },
      templateUrl: 'partials/text-editor.html',
    };
  }

  app.directive('textEditor', textEditor);

<div ng-controller="EditorCtrl">
  <div class="stack-item" ng-if="show">
    <div class="stack-item-header" ng-include="'partials/section-header.html'"></div>

    <div class="details-menu">
      <div class="details-actions">
        <div class="details-edit-actions">
          <a ng-click="saveEditing()"><span class="icon-save"></span>Save</a>
          <a ng-click="cancelEditing()"><span class="icon-cancel"></span>Cancel</a>
        </div>
      </div>
    </div>

    <div class="details">
      <fieldset>
        <legend>Medication</legend>
        <div text-editor title="'Drug Name'" name="'drugName'" editor="this"></div>
        <div text-editor title="'Dosage'" name="'dosage'" editor="this"></div>
      </fieldset>
    </div>
  </div>
</div>

<div content-link>
  <a link ng-bind="case.info.caseName"></a>
  <input content ng-model="case.info.caseName" />
</div>

(function () {
    'use strict';

    angular
        .module('xx')
        .directive('contentLink', contentLink)

    contentLink.$inject = ['$compile'];
    function contentLink($compile) {
        var directive = {
            restrict: 'A',
            transclude: true,
            scope: {
                contentActive: '=?'
            },
            link: link,
            controller: ContentLinkController,
            controllerAs: 'contentLink',
            template: '<div class="cl-link" ng-hide="contentLink.contentActive" ng-click="contentLink.toggleContent()"></div>' +
                      '<div class="cl-content" ng-show="contentLink.contentActive" outside-click="contentLink.toggleContent()" outside-if="contentLink.contentActive" ' +
                            'ignore-element-selectors="{{ contentLink.otherContentElements }}">' +
                      '</div>'
        };

        return directive;

        function link(scope, element, attrs, controller, transclude) {
            angular.extend(scope.contentLink, {
                toggleContent: toggleContent
            });

            element.removeAttr('content-link').addClass('content-link');

            transclude(scope.$parent, function (clone, innerScope) {
                clone.filter('[link]').removeAttr('link').appendTo(element.find('.cl-link'));
                clone.filter('[content]').removeAttr('content').appendTo(element.find('.cl-content'));
            });

            var deregisterScopeDestroyListener = scope.$on('$destroy', cleanup);

            function toggleContent() {
                scope.contentActive = scope.contentLink.contentActive = !scope.contentLink.contentActive;

                element.toggleClass('content-active', scope.contentLink.contentActive);
            }

            function cleanup() {
                scope.contentLink = null;
                deregisterScopeDestroyListener();
            }
        }
    }

    ContentLinkController.$inject = ['$scope', '$element', '$attrs'];
    function ContentLinkController($scope, $element, $attrs) {
        var vm = this;

        angular.extend(vm, {
            contentActive: $scope.contentActive || false,
            otherContentElements: $attrs.otherContentElements
        });
    }
})();

指令：

<label class="title">{{title}}</label>
<span class="value" ng-show="!editor.edited[name]" ng-click="editor.activateEditing(name)">{{editor.entity[name]}}</span>
<input ng-show="editor.edited[name]" ng-model="editor.entity[name]" ng-change="editor.validate(name)"></input> 

function editorController ($scope, $controller) {
    function copy (source) {
      var result = {};
      for (var prop in source) {
        if (source.hasOwnProperty(prop) && prop.charAt(0) !== '_') {
          result[prop] = source[prop];
        }
      }

      return result;
    }

    $scope.edited = {};

    $scope.activateEditing = function (name) {
      var entity = $scope.entity;

      $scope.edited[name] = true;

      if (!entity._backup) {
        entity._backup = copy(entity);
      }
    };

    $scope.cancelEditing = function () {
      var entity = $scope.entity, backup = entity._backup;
      for (var prop in backup) {
        if (backup.hasOwnProperty(prop)) {
          entity[prop] = backup[prop];
        }
      }

      delete entity._backup;
      $scope.edited = {};
    };

    $scope.saveEditing = function () {
      var entity = $scope.entity, backup = entity._backup;
      $scope.$emit('saveEntity', entity, backup);

      delete entity._backup; 
      $scope.edited = {};
    };

    $scope.deleteEntity = function () {
      var entity = $scope.entity;
      $scope.$emit('deleteEntity', entity);

      delete entity._backup; 
      $scope.edited = {};
    };

    $scope.$on('trackEntity', function (event, entity) {
      $scope.entity = entity;
      $scope.edited = {};
    });
  }

  editorController.$inject = ['$scope', '$controller'];
  app.controller('EditorCtrl', editorController);

function textEditor() {
    return {
      scope: {
        title: '=',
        name: '=',
        editor: '='
      },
      templateUrl: 'partials/text-editor.html',
    };
  }

  app.directive('textEditor', textEditor);

<div ng-controller="EditorCtrl">
  <div class="stack-item" ng-if="show">
    <div class="stack-item-header" ng-include="'partials/section-header.html'"></div>

    <div class="details-menu">
      <div class="details-actions">
        <div class="details-edit-actions">
          <a ng-click="saveEditing()"><span class="icon-save"></span>Save</a>
          <a ng-click="cancelEditing()"><span class="icon-cancel"></span>Cancel</a>
        </div>
      </div>
    </div>

    <div class="details">
      <fieldset>
        <legend>Medication</legend>
        <div text-editor title="'Drug Name'" name="'drugName'" editor="this"></div>
        <div text-editor title="'Dosage'" name="'dosage'" editor="this"></div>
      </fieldset>
    </div>
  </div>
</div>

<div content-link>
  <a link ng-bind="case.info.caseName"></a>
  <input content ng-model="case.info.caseName" />
</div>

(function () {
    'use strict';

    angular
        .module('xx')
        .directive('contentLink', contentLink)

    contentLink.$inject = ['$compile'];
    function contentLink($compile) {
        var directive = {
            restrict: 'A',
            transclude: true,
            scope: {
                contentActive: '=?'
            },
            link: link,
            controller: ContentLinkController,
            controllerAs: 'contentLink',
            template: '<div class="cl-link" ng-hide="contentLink.contentActive" ng-click="contentLink.toggleContent()"></div>' +
                      '<div class="cl-content" ng-show="contentLink.contentActive" outside-click="contentLink.toggleContent()" outside-if="contentLink.contentActive" ' +
                            'ignore-element-selectors="{{ contentLink.otherContentElements }}">' +
                      '</div>'
        };

        return directive;

        function link(scope, element, attrs, controller, transclude) {
            angular.extend(scope.contentLink, {
                toggleContent: toggleContent
            });

            element.removeAttr('content-link').addClass('content-link');

            transclude(scope.$parent, function (clone, innerScope) {
                clone.filter('[link]').removeAttr('link').appendTo(element.find('.cl-link'));
                clone.filter('[content]').removeAttr('content').appendTo(element.find('.cl-content'));
            });

            var deregisterScopeDestroyListener = scope.$on('$destroy', cleanup);

            function toggleContent() {
                scope.contentActive = scope.contentLink.contentActive = !scope.contentLink.contentActive;

                element.toggleClass('content-active', scope.contentLink.contentActive);
            }

            function cleanup() {
                scope.contentLink = null;
                deregisterScopeDestroyListener();
            }
        }
    }

    ContentLinkController.$inject = ['$scope', '$element', '$attrs'];
    function ContentLinkController($scope, $element, $attrs) {
        var vm = this;

        angular.extend(vm, {
            contentActive: $scope.contentActive || false,
            otherContentElements: $attrs.otherContentElements
        });
    }
})();

（功能（）{
"严格使用",；
有棱角的
.module（'xx'）
.directive（'contentLink'，contentLink）
contentLink.$inject=['$compile']；
函数contentLink（$compile）{
var指令={
限制：“A”，
是的，
范围：{
contentActive:“=？”
},
链接：链接，
控制器：ContentLinkController，
controllerAs:“contentLink”，
模板：“”+
'' +
''
};
返回指令；
功能链接（范围、元素、属性、控制器、转移）{
角度扩展（scope.contentLink{
toggleContent:toggleContent
});
element.removeAttr（'content-link'）.addClass（'content-link'）；
transclude（范围$parent，函数（克隆，内部范围）{
clone.filter（'[link]'）.removeAttr（'link'）.appendTo（element.find（'.cl link'））；
clone.filter（'[content]'）.removeAttr（'content'）.appendTo（element.find（'.cl content'））；
});
var deregisterScopeDestroyListener=scope.$on（“$destroy”，cleanup）；
函数toggleContent（）{
scope.contentActive=scope.contentLink.contentActive=！scope.contentLink.contentActive；
元素.toggleClass（'content-active'，scope.contentLink.contentActive）；
}
函数清理（）{
scope.contentLink=null；
取消注册ScopeDestroyListener（）；
}
}
}
ContentLinkController.$inject=['$scope'，'$element'，'$attrs']；
函数ContentLinkController（$scope、$element、$attrs）{
var vm=这个；
角度扩展（vm{
contentActive:$scope.contentActive | | false，
otherContentElements:$attrs.otherContentElements
});
}
})();

因此，似乎这并不能解决取消编辑的问题，但我的同事只是指出，这是没有必要的——可以通过某种方式在“不同”层上完成

---

因此，我们想在大型应用程序的范围内创建一些“可重用”的东西-从您的角度来看，哪种解决方案更合理？我同意第一种方法

我对第二种方法的问题是，它违背了角度方法论。第二种方法更接近于“组件”样式，这是其他框架（如捆绑整个组件的ExtJs）中有效且推荐的样式。我不认为那种风格应该被引入到我的作品中

从更简单的世界观来看，我一眼就能理解第一种方法，而我只是放弃了第二种方法。实践性开发还意味着我们在团队中工作，可维护性和易更改性胜过其他深刻的哲学问题

---

另外-请不要进行暴力讨论：）

谢谢！我也坚信简单是成功的关键。正如所有深奥的事物一样——真理是一个矛盾的概念——最简单的事情很难实现：）