Javascript AngularJS指令继承

我对Angular很陌生，我有一个关于指令和继承的问题。 让我们假设有两个指令：

<my-pic    my-log="log pic"       my-warn="pic warn"    my-src="/some/url/pic.jpg"></my-pic>
<my-button my-log="log button"    my-warn="button warn" my-text="button text"></my-button>

JS代码

angular.module("app", [])
.directive("myPic",function(){
    return {
         restrict: "E"
        ,scope: {
             log: "@myLog"
            ,src: "@mySrc"
            ,warn:"@myWarn"
        }
        ,template: '<img src="{{src}}" title="{{log}} | {{warn}}"></img>'
        ,controller: function($scope, $log){
            $log.log($scope.log);
            $log.warn($scope.warn);
        }
    };
})
.directive("myButton",function(){
    return {
         restrict: "E"
        ,scope: {
             log:  "@myLog"
            ,text: "@myText"
            ,warn: "@myWarn"
        }
        ,template: '<button title="{{log}} | {{warn}}">{{text}}</button>'
        ,controller: function($scope, $log){
            $log.log($scope.log);
            $log.warn($scope.warn);
        }
    };
});

角度模块（“应用程序”，[]） .指令（“myPic”，函数（）{ 返回{ 限制：“E” ，范围：{ 日志：“@myLog” ，src:“@mySrc” ，警告：“@myWarn” } ，模板：“” ，控制器：函数（$scope，$log）{ $log.log（$scope.log）； $log.warn（$scope.warn）； } }; }) .指令（“myButton”，函数（）{ 返回{ 限制：“E” ，范围：{ 日志：“@myLog” ，文本：“@myText” ，警告：“@myWarn” } ，模板：“{text}}” ，控制器：函数（$scope，$log）{ $log.log（$scope.log）； $log.warn（$scope.warn）； } }; }); 代码笔

问题

问题是，是否可以创建第三个指令，从中可以派生MyPic和MyButton指令，并处理my log=“…”和my warn=“…”属性（$log代码和将title属性添加到模板代码）？ my log和my warn属性必须由同一个指令处理，并且属性值仍应可由子指令访问

---

谢谢你的帮助

在这种情况下，您不需要继承。只需编写一个服务来处理常见的日志记录操作，并将其注入指令中。

好的，我找到了一个可以接受的解决方案，不过也许有更好的解决方案。我所做的是，我创建了第三个指令“myLogger”，然后将其添加到“myButton”和“myPic”指令的模板中。我还创建了一个定义为常量的函数，该函数将日志属性添加到指令的范围中。“myLogger”指令执行控制台日志记录，并向HTML元素添加“title”属性

欢迎提供任何改进该解决方案的建议/想法。如果有人有更好的解决方案，我也将不胜感激

HTML代码：

<my-pic    my-log="log pic"       my-warn="pic warn"    my-src="/some/url/pic.jpg"></my-pic>
<my-button my-log="log button"    my-warn="button warn" my-text="button text"></my-button>

angular.module("app", [])
.constant("addLogScope",function(opts){
    return angular.extend(opts || {},{
       myWarn: "@"
      ,myLog:  "@"
    });
})
.directive("myLogger",function(){
    return {
         restrict: "A"
        ,scope: true
        ,controller: function($scope, $log){
            console.log($scope.myLog);
            console.info($scope.myWarn);
        }
        ,link: function($scope, $element, $attrs){
            $element.prop("title",$scope.myLog + " | " + $scope.myWarn);
        }
    };
})
.directive("myPic",function(addLogScope){
    return {
         restrict: "E"
        ,scope: addLogScope({
            mySrc: "@"
        })
        ,transclude: true
        ,template: '<img src="{{mySrc}}" my-logger></img>'
        ,controller: function($scope){
        }
    };
})
.directive("myButton",function(addLogScope){
    return {
         restrict: "E"
        ,scope: addLogScope({
           myText: "@"
        })
        ,template: '<button my-logger>{{myText}}</button>'
        ,controller: function($scope){
        }
    };
});

Javascript代码：

<my-pic    my-log="log pic"       my-warn="pic warn"    my-src="/some/url/pic.jpg"></my-pic>
<my-button my-log="log button"    my-warn="button warn" my-text="button text"></my-button>

angular.module("app", [])
.constant("addLogScope",function(opts){
    return angular.extend(opts || {},{
       myWarn: "@"
      ,myLog:  "@"
    });
})
.directive("myLogger",function(){
    return {
         restrict: "A"
        ,scope: true
        ,controller: function($scope, $log){
            console.log($scope.myLog);
            console.info($scope.myWarn);
        }
        ,link: function($scope, $element, $attrs){
            $element.prop("title",$scope.myLog + " | " + $scope.myWarn);
        }
    };
})
.directive("myPic",function(addLogScope){
    return {
         restrict: "E"
        ,scope: addLogScope({
            mySrc: "@"
        })
        ,transclude: true
        ,template: '<img src="{{mySrc}}" my-logger></img>'
        ,controller: function($scope){
        }
    };
})
.directive("myButton",function(addLogScope){
    return {
         restrict: "E"
        ,scope: addLogScope({
           myText: "@"
        })
        ,template: '<button my-logger>{{myText}}</button>'
        ,controller: function($scope){
        }
    };
});

角度模块（“应用程序”，[]） .常数（“addLogScope”，函数（opts）{ 返回angular.extend（选择|{}{ myWarn:“@” ，myLog:“@” }); }) .指令（“myLogger”，函数（）{ 返回{ 限制：“A” ，范围：true ，控制器：函数（$scope，$log）{ log（$scope.myLog）； console.info（$scope.myWarn）； } ，链接：函数（$scope，$element，$attrs）{ $element.prop（“title”、$scope.myLog+“|”+$scope.myWarn）； } }; }) .指令（“myPic”，功能（addLogScope）{ 返回{ 限制：“E” ，作用域：addLogScope({ mySrc:“@” }) ，transclude:true ，模板：“” ，控制器：功能（$scope）{ } }; }) .指令（“myButton”，函数（addLogScope）{ 返回{ 限制：“E” ，作用域：addLogScope({ myText:“@” }) ，模板：“{myText}}” ，控制器：功能（$scope）{ } }; });

---

代码笔：

指令只能继承其父控制器作用域，前提是它们是嵌套的，并且子指令已使父指令成为所需的是否有其他方法来完成我想做的事情？与接受$scope和$element对象作为参数的服务类似？或者在服务中操纵DOM真的是个坏主意吗？是的，从服务中操纵DOM是个坏主意。首选的方法是DOM。在这种情况下，您可以考虑事件

$broadcast

或

$emit

，但我应该将事件处理程序的代码放在哪里？那么您将如何实现DOM操纵呢？根据pankajparkar的说法，在服务中操纵DOM是个坏主意。不要认为操纵DOM，AngularJS无论如何都会处理这个问题。您应该只操纵您的值（状态）。记录和更改值由服务完成。顺便说一下，我在您的指令代码中看不到任何DOM操作。所有变量都已绑定。您需要一个执行相同业务逻辑的函数，因此这是一个服务方法。如果需要，将您的作用域变量作为参数提供给服务方法。对于DOM操作，我的意思是该指令应该向模板添加title=“{log}}|{warn}}”属性。您已经有2条指令了，那么继承呢？您已经设置了模板。指令将模板添加到容器中并绑定其变量。这里没有问题。