如何创建一个Angular指令,接受指令名称中的参数?

时间:2016-07-29 17:40:07

标签: javascript angularjs

我想创建一个接受其名称本身的参数的指令?
对于Eg。我想要

<my-directive = "myparameter"></my-directive>

不像

<my-directive parameter-name="myparameter"></my-directive>

请解释我如何用隔离范围实现

2 个答案:

答案 0 :(得分:0)

下面列出的是制作角度暗示(EAMC)的替代方案 我不认为您可以创建一个指令,除非您修改angularDirective源代码,如上所述。可能的示例将有所帮助。

  

HTML

<div ng-app="app">
      <my-directive param="'**element**'"></my-directive>

      <div my-directive="" param="'attribute'"></div>

      <div>
           <!-- directive: my-directive **comment** -->    
      </div>

      <div class="my-directive: **class**;"></div>
</div>


    var app = angular.module('app', []);

***
  

JS

app.directive('my-directive', function() {
    return {
        restrict: 'EAMC',
        template: '<div>Directive from {{param}}!</div>',
        scope: {
            loc: '='
        },
        replace: true,
        link: function(scope, elem, attrs) {
            if (attrs.my-directive) {
                scope.loc = attrs.my-directive;
            }
        }
    };
});

答案 1 :(得分:0)

您应该可以通过以下方式完成此任务:

app.directive('myDirective', function(){
    return {
        restrict: 'EA',
        scope: {'myDirective': '='}, // this won't actually do the binding, but is here for code-clarity
        link: function(scope, elem, attr){
            // here is where we actually bind the data
            attr.$observe('myDirective', function(myDirective){
                // since the attribute is observed as a string, $eval it on the $parent scope
                // (note that without isolate scope, you could do scope.$eval(myDirective)
                scope.myDirective = scope.$parent.$eval(myDirective);
            });
        }
    };
});