Question

如何将对象传递给指令？我试图在我的指令users中访问scope但未成功。这就是我尝试过的：

在我的控制器中，我将一个users数组设置为范围：

$scope.users = payload.data.results;

然后我想将该对象作为属性传递给我的指令：

<display test123='users'></display>

指令功能：

function ListDisplay() {
    var directive = {
      replace: 'true',
      restrict: 'E',
      scope: {
        test123: '='
      },
      controller: ListDisplayController,
      controllerAs: 'vm',
      bindToController: true,
      link: ListDisplayLinkFunc
    };

    return directive;


    function ListDisplayController($scope) {
      console.log($scope.test123);

    }

    function ListDisplayLinkFunc(scope, elem, attr) {

      console.log(scope.test123);
    }
  }

但是当我尝试安慰scope.data时，我得到了未定义。

Answer 1

似乎payload.data.results是AJAX调用的结果。在AJAX调用成功之前，正在编译您的指令。因此，您需要在控制器中注册一个手表，以便在通过AJAX调用更新数据时获取值。

function ListDisplayLinkFunc(scope, elem, attr) {
    console.log(scope.test123);

    scope.$watch('test123', function(newValue) {
         if (newValue) {
            console.log('Updated users in the directive', newValue);
         }
    });
}

Answer 2

您正在使用controllerAs: 'vm'和bindToController: true，这意味着您在范围内传递的值将分配给名为vm的变量

试试这个：

function ListDisplayController($scope) {
  var vm = this;
  console.log(vm.test123);

}

处理使用＆＃34; bindToController＆＃34;在你可以做的链接功能

function ListDisplayLinkFunc(scope, elem, attr) {

  console.log(scope.vm.test123);
}

你可以在这个plunker中看到它：http://plnkr.co/edit/r2wuTE5oafYeu8h3Cjio?p=preview

将对象传递给AngularJS

2 个答案: