Question

我阅读了Angularjs文档。有一些例子用于定义指令而不传递值。例如：

angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.customer = {
    name: 'Naomi',
    address: '1600 Amphitheatre'
  };
}])
.directive('myCustomer', function() {
  return {
    templateUrl: 'my-customer.html'
  };
});

和HTML

<div ng-controller="Controller">
  <div my-customer></div>
</div>

但我想创建一个像ng-model这样的指令，其中传递一个属性。例如

 <div ng-controller="Controller">
      <div my-customer="Hello"></div>
    </div>

我想在我的指令定义链接函数中检索这个问候。如何实现？

Answer 1

您可以传递尽可能多的属性，并可以使用链接功能中的第三个参数直接访问它们。你走了：

.directive('myCustomer', function() {
  return {
    templateUrl: 'my-customer.html',
    link: function(scope, element, attr) {
       console.log('Attribute:', attr.myCustomer, attr.otherData);
    }
  };
});

<div my-customer="hello" other-data="foo"></div>

Answer 2

只需在文档（ Angular Directives ）中滚动一点，您可以获得上述代码的答案attr

.directive('myCustomer', function() {
return {
templateUrl: function(elem, attr){
  ...
  //attr will be having the value 
  return attr;
  }
};

Answer 3

如果您想使用隔离范围，那么您可以这样做：

.directive('myCustomer', function() {
  return {
    scope: {
      myCustomer : '=' //If expected value is an object use '='. If it is just text, use '@'
    }
    templateUrl: 'my-customer.html',
    link: function(scope, ele, attr){
       console.log(scope.myCustomer);
    }
  };
});

如果您不想使用隔离范围，那么

.directive('myCustomer', function($parse) {
  return {
    templateUrl: 'my-customer.html',
    scope: true,
    link: function(scope, ele, attr){
       // if expected value is object
      var hello = $parse(attr.myCustomer)(scope);

       // if expected value is just text
      var hello = attr.myCustomer;

    }
  };
});

如何获取传递给指令的值

3 个答案: