如何传递参数并从angular js中的自定义指令获取值？

Question

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example11-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular.min.js"></script>
  <script src="script.js"></script>  
</head>
<body ng-app="docsSimpleDirective">
  <div ng-controller="Controller">
  <div my-customer></div>
</div>
</body>
</html>

script.js

(function(angular) {
  'use strict';
angular.module('docsSimpleDirective', [])
  .controller('Controller', ['$scope', function($scope) {
    $scope.customer = {
      name: 'Naomi',
      address: '1600 Amphitheatre'
    };
  }])
  .directive('myCustomer', function() {
    return {
      template: 'Name: {{customer.name}} Address: {{customer.address}}'
    };
  });
})(window.angular);

我想将值传递给指令，并基于键要从控制器方法中检索值。

在此处传递值<div my-customer="FirstName"></div> FirstName是要将其传递给指令并从控制器方法获取FirstName值的键。

我怎么能做到这一点？任何类似的线程？

Answer 1

要将值传递给自定义指令，您需要在指令中指定它。

.directive('myCustomer', function() {
  return {
    scope: {
      myvariable: "="
    },
    template: 'Name: {{myvariable.name}} Address: {{myvariable.address}}'
  };
});

现在你可以：

<!-- customer is an object from your controller -->
<div my-customer myvariable="customer"></div>

有多种传递值的方法。 您可以使用@ ， =和& 。 他们都工作不同。 阅读这篇出色的SO文章，了解您可以执行的所有绑定类型。

JsFiddle演示

请记住， '='表示绑定是双向的。 它是对父作用域变量的引用。 换句话说，当您更改指令中的变量时，它也将在父范围中被更改。

如何传递参数并从angular js中的自定义指令获取值？

问题描述

1 个解决方案

解决方案1
3 已采纳 2015-05-27 13:41:30

如何传递参数并从angular js中的自定义指令获取值？

问题描述

1 个解决方案

解决方案1 3 已采纳 2015-05-27 13:41:30

解决方案1
3 已采纳 2015-05-27 13:41:30