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，您应该拥有一个控制器（与controllerAs一起使用，scope仍可用于定义为{{1}创建哪种范围）因为此属性用于将范围属性直接绑定到指令的控制器。

如果您不需要控制器，那么您只需使用范围绑定将对象传递给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;
}]);

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 demo https://plnkr.co/edit/A5E542OJRwuGQj5wQ4sl?p=preview

如果您仍想使用 bindToController ，则需要在指令中提及控制器名称，如下所示

演示指令

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 demo https://plnkr.co/edit/3j7Sh317K0EKOed8nkpb?p=preview

如何将对象传递给角度指令？

3 个答案: