如何将对象传递给 angular 指令？

Question

我得到了一个如下所示的指令：

  .directive('navigation', ['$rootScope', '$i18next', function ($rootScope, $i18next) {
        return {
            bindToController: true,
            templateUrl: 'navigation.tmpl.html',
            link: function (scope , element , attrs) {   ....

实施

<navigation></navigation>

如何向指令添加对象？

因为我会在不同的地方使用它，所以我想将一个对象发送到指令中，这样指令的行为就会因对象而异。

Answer 1

您可以通过范围传递它：

.directive('navigation', ['$rootScope', '$i18next', function ($rootScope, $i18next) {
  return {
    scope: {
      objParam: '='
    },
    bindToController: true,
    templateUrl: 'navigation.tmpl.html',
    link: function (scope , element , attrs) {   ....

然后你的指令变成：

<navigation obj-param="some.object"></navigation>

替代版本：

.directive('navigation', ['$rootScope', '$i18next', function ($rootScope, $i18next) {
  return {
    bindToController: {
      objParam: '='
    },
    scope: true,
    templateUrl: 'navigation.tmpl.html',
    link: function (scope , element , attrs) {   ....

Answer 2

如果您使用 bindToController，您应该为您的 directive，因为这个属性用于将范围属性直接绑定到指令的控制器。

如果您不需要控制器，那么您可以简单地使用范围绑定将对象传递给您的 directive。

请参阅以下两个示例：

angular.module('myApp', [])
.controller('MyCtrl', ['$scope', '$timeout', function MyCtrl($scope, $timeout) {
  $scope.test = {val: 10};
  
  $timeout(function(){ 
    $scope.test.val = 111;
  }, 1000);
}])
.directive('navigation1', ['$rootScope', function ($rootScope) {
  var navigationDirective1 = {
      restrict: 'E',
      scope: {},
      bindToController: {
        obj: '='
      },
      controllerAs: 'vm',
      controller: function(){ var ctrl = this; ctrl.$onInit = function onInit(){ console.log(ctrl.obj); }; },
      templateUrl: 'navigation.tmpl.html',
      link: function (scope , element , attrs) {
        console.log(scope.obj); //returns undefined
      }
  }
  return navigationDirective1;
}])
.directive('navigation2', ['$rootScope', function ($rootScope) {
  var navigationDirective2 = {
      restrict: 'E',
      scope: {
          obj: '<'
      },
      templateUrl: 'navigation.tmpl.html',
      link: function (scope , element , attrs) {
        console.log(scope.obj);
      }
  }
  return navigationDirective2;
}]);

<script src="//code.angularjs.org/1.6.2/angular.js"></script>

<div ng-app="myApp">
  <div ng-controller="MyCtrl">    
    <navigation1 obj="test"></navigation1> 
    --  
    <navigation2 obj="test"></navigation2>
  </div>
  
  <script type="text/ng-template" id="navigation.tmpl.html">
    <div ng-if="vm.obj">
        Hello from directive's controller {{vm.obj}}
    </div>
    <div ng-if="obj">
        Hello from directive's link {{obj}}
    </div>
  </script>
  
</div>

Answer 3

您可以将对象从控制器传递到指令，而无需在指令中使用 bindToController: true。

演示控制器

app.controller('MainCtrl', function($scope) {

  $scope.Obj={"fName":"John","lName":"Snow"};
});

演示指令

app.directive('dirDemo', function () {
    return {
        scope: {
            param: '='
        },
        link: function (scope, element, attrs) {
          alert(scope.param.fName);
          alert(scope.param.lName);
            }
    }
});

HTML:

<body ng-controller="MainCtrl">
     <div dir-demo
            param="Obj"
    </div>
  </body>

Plunker 演示 https://plnkr.co/edit/A5E542OJRwuGQj5wQ4sl?p=preview

如果你仍然想使用 bindToController 那么你需要在指令中提到 controller name 如下

演示指令

app.directive('dirDemo', function () {
    return {
        scope: {
            param: '='
        },
        bindToController: true,
        controller: 'MainCtrl',
        controllerAs: 'ctrl',
            link: function (scope, element, attrs) {
          alert(scope.ctrl.param.fName);
          alert(scope.Obj.lName);
            }
    }
});

Plunker 演示 https://plnkr.co/edit/3j7Sh317K0EKOed8nkpb?p=preview

如何将对象传递给 angular 指令？

How to pass an object to an angular directive?

angularjs

angularjs-directive