有没有办法让指令从AngularJs应用程序中的另一个指令继承行为？

Question

我需要使用Angular创建一个类似于页面的仪表板，一旦我开始从主页面编写窗口小部件，很明显我在它们之间重复代码。

基本上，所有小部件都有一些＆＃34;数据＆＃34;，一个用于呈现该数据的模板和一个＆＃34; loading＆＃34; property（当请求正在进行以在其容器内显示动画图标时为true）。

但是，模板本身在小部件中是不同的。由于模板不同，数据处理和（可能）操作也不同。

好的，这意味着每个小部件的控制器不同。但我可以分享他们之间的基本行为吗？就像执行请求一样，设置＆＃34; loading＆＃34; to＆＃34; true＆＃34;，处理/操纵响应，将加载设置为false，显示模板。

这样的场景如何与Angular 1.x一起使用？

我感谢任何帮助，找出我需要研究的主题。

感谢您的帮助。

Answer 1

我这样做的方法是让一个基本控制器是包含所有基本功能的vm，然后会有一个子视图作为指令，通常没有隔离范围，所以它可以看到vm并使用其功能（但您也可以将其作为指令定义的一部分传递）。

如果你想象它没有指令一秒钟，它可能看起来像这样：

<div ng-controller="parent as vm">
   <div ng-controller="child">...</div>
</div>

控制器可能看起来像：

app.module('someModule').controller('parent', ['dataService', parent])
.controller('child', ['$scope', child]);

function parent(dataService) {
   var vm = this;
   var dataCollection = dataService.collection;
   vm.findTheData = function(value) {
     return dataCollection.indexOf(value);
   }
}

function child($scope) {
    $scope.dataIndex = -1;
    $scope.onButtonClicked = function(value) {
        if ($scope.vm) $scope.dataIndex = vm.findTheData(value);
    }
}