Question

我学习如何在Angular JS中编写自定义指令。我做了第一步：

.directive("myClass", function(){
     return function (scope, element, attributes){
          // HERE TO GET PARAMETER AND COMPARE
     }
});

<div my-class="value"></div>

我尝试将参数value传递给指令my-class，然后在指令中使用switch case检查并返回类名。

我怎样才能获得这个值？

Answer 1

您可以通过多种方式将参数传递给指令。请参阅Directive Guide。

一种方法是使用Directive Definition Object中的scope属性，以便在link函数中使用这些值。

另一种方法是使用属性
在您的情况下，您可以使用属性来访问指令中指定的参数尝试记录属性并查看可用的内容。

您可以使用$parse获取参数值

.directive("myClass", function($parse){
     return function (scope, element, attributes){
          // HERE TO GET PARAMETER AND COMPARE
          console.log(attributes);
          console.log($parse(attributes.myClass));
     }
});



<div my-class="value"></div>

Answer 2

返回值错误。它应该是这样的：

var module = angular.module('someModule', []);
module.directive("myClass", function(){
    return {
        restrict: 'A',
        // other scope options here...
        link: function ($scope, $el, $attrs) {
            // $attrs.myClass == 'value'
        }
    }
});

Answer 3

将值传递给指令的最简单方法是隔离指令的范围

angular.module("app",[])
.directive("myClass", function(){
     return {
          restrict : 'A',
          scope : {
            myValue : '@'
          },
          link :  function (scope, element, attributes){
              console.log(scope.myValue)
          }
      }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app"  >

    <div my-class my-value="value"></div>
</div>

如何在指令Angular JS中传递一个参数？

3 个答案: