如何让“ng-”使用任何属性？

Like ng-enabled，ng-src，ng-class 有什么东西可以使它适用于任何属性（ng-x）？如何让“ng-”使用任何属性？

例如，这是我的代码：

<div ng-attrbuite1="a" ng-otherattribute="b"></div>

我想它设置：

<div attribute1="a_value" attribute2="b_value_in_scope">

在运行时我还不知道，这将是该属性的名称存在在HTML中。

来源

2016-01-23 Aminadav

我建议你阅读有关指示，这是关于这个问题的好文章：http://www.undefinednull.com/2014/02/11/mastering-the -spec-of-a-directive-in-angularjs/ – user2517028

我建议你不要将你的指令命名为ng- *。请参阅第2个最佳实践块https://docs.angularjs.org/guide/directive#creating-directives –

否......除非核心指令实际存在，否则在'ng-'中没有任何内容隐含 – charlietfl

如果你的意思，你想有一个包罗万象，其中有前缀的所有属性说my（你应该使用您自己的前缀）进行评估，然后设置为它们各自所需的非前缀属性：

让自己的自定义指令
查找元素上的所有属性（由$提供ATTRS）
获得评估值
设置元素的实际属性

我将不包括制造您可以找到的实际指令here

在您的指令的link函数中，其中一个参数将为$attrs。 $attrs包含规范化（驼峰式）和非规范化属性名称，它们各自的评估值（如果使用表达式）以及一些辅助方法。

所以你可以简单地遍历$ attrs（或$ attrs。$ attr）键，过滤出你不应该使用的类似ng-model，ng-selected等等，得到评估值然后设置相应的未加前缀的对应部分。

Object.keys($attrs).filter(function(key){ 
    //filter out keys like ngModel,ngSelect,$set etc 
    return /^my/.test(key); 
}).forEach(function(key){ 
    //$attrs.$attr contains the non-normalized 
    //versions of the attributes 
    //this example assumes you will prefix with `my` 
    //so remove `my-` to get the attribute name to set 
    var attrName = $attrs.$attr[key].replace("my-",""); 

    //Use $parse() if you just want to use some scope's property name 
    //for example my-attribute="somePropertyName" 
    $attrs.$set(attrName,$parse($attrs[key])($scope)); 

    //Use just $attrs[key] if you are using some expression 
    //for example my-attribute="{{somePropertyName}}" 
    $attrs.$set(attrName,$attrs[key]); 
});

angular.module("test",[]) 
 
.controller("ctrl",function($scope){ 
 
    
 
    $scope.someprop = "Some Value"; 
 
    
 
}) 
 
.directive("caAttr",function($parse){ 
 
    return { 
 
    restrict : 'A', 
 
    link : function($scope, $element, $attrs) { 
 
     console.log($attrs); 
 
     Object.keys($attrs).filter(function(key){ 
 
     return /^my/.test(key); 
 
     }).forEach(function(key){ 
 
     var attrName = $attrs.$attr[key].replace("my-",""); 
 
     $attrs.$set(attrName,$parse($attrs[key])($scope)); 
 
     }); 
 
     angular.element("#log").text(angular.element("#container").html()); 
 
    } 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="test" ng-controller="ctrl"> 
 
    <div id="container"> 
 
    <div ng-model="mymodel" ng-selected="{{nothing}}" my-stack="someprop" ca-attr></div> 
 
    </div> 
 
    <div id="log"></div> 
 
</div>

来源

2016-01-24 01:01:29

谢谢。看起来不错 – Aminadav

您可以使用指令。下面是一个简单的例子：

HTML

<div ng-app="myApp"> 
    <div ui-foo="foo">foo scope variable: {{foo}}</div> 
</div>

angular.module('myApp', []).directive('uiFoo', 
    function() { 
    return { 
     restrict: 'EAC', 
     link: function($scope, element, attrs, controller) { 
     $scope.foo = attrs.uiFoo; 
     } 
    }; 
    } 
);

来源

2016-01-24 00:03:39 Derlin

如何让“ng-”使用任何属性？

回答

相关问题