将 angular 指令范围传递给指令控制器

Question

我目前正在学习在 AngularJs 中使用指令，尽管我知道 Angular 2.0 仍处于 alpha 阶段，但我已经开始阅读 "preparing for angular 2.0" 文章围绕网络。

他们中有相当多的人提到离开 link 函数并使用控制器和 bindToController 只是为了让指令更像 Angular 2.0 "component" .

我遇到的问题是我真的不知道如何将我的指令范围传递给我为该指令使用的控制器...
例如，当给出以下指令时：

(function() {
  'use strict';

  angular.module('app').directive('gidsImagePreview', imagePreview);

  /* @ngInject */
  function imagePreview() {
    var directive = {
        restrict: 'EA',
      templateUrl: 'scripts/directives/gidsImagePreview.directive.html',
      scope : {
            images : '='
        },
      controller: ImagePreviewController,
      controllerAs: 'vm',
            bindToController: true
    };

    return directive;
  }

    /* @ngInject */
  function ImagePreviewController(){
        var self = this;
        self.featured = self.images[0];
        self.preview = preview;

        function preview(img){
            self.featured = img;
        }
  }
})();

以及下面的html到"call"指令（vm.project.images是一个文件名为属性的图像对象数组）：

<gids-image-preview images="vm.project.images"></gids-image-preview>

那我的ImagePreviewController中的"self.images"怎么一直是undefined呢？

阅读 this article，he/she 似乎正在做我正在做的事情（只是没有使用数组对象）...

Answer 1

您只需将作用域注入控制器即可。如果你不缩小，你可以简单地将 $scope 作为 ImagePreviewController:

的参数

    function ImagePreviewController($scope) {
        ...
     }

此外，如果缩小很重要，请在控制器定义下方添加：ImagePreviewController.$inject = ['$scope'];。

如果要使用数组文字语法，请这样声明：

    var ImagePreviewController = ['$scope', function ($scope) { ... }];

然后您可以通过$scope.images访问图像数组。我更喜欢使用 $inject 属性，这只是一种风格问题。您尝试使用的 this/self 工作流程仅在您希望控制器本身公开 API 供其他指令使用时才有用。

为了将来参考，angular 文档对指令以及编写指令的不同方式进行了非常完整的描述：https://docs.angularjs.org/guide/directive

Answer 2

但您可以使用 [directiveElement].getIsolatedScope() function.It 可用 everywhere.Maybe 此功能可以帮助您通过其他方式解决问题。

Answer 3

事实证明，我所做的并没有什么错。这是一个时间问题。
当我想在我的指令控制器中使用 "images" 时，它仍然是未定义的，因为我的指令绑定的主要对象 (project.images) 还没有加载。
我在我的路由配置中放置了一个解析函数，以确保在我的详细信息页面（包含指令）打开之前加载了主要对象。

此外，@camden_kid 还提到我必须在我的控制器中使用 var vm=this 因为我使用了 controllerAs: "vm" 选项；据我所知，这不是真的，您在控制器函数中使用的内容与您在视图中引用该控制器属性的方式无关。
因此，使用 controllerAs: 'vm' 仅意味着您必须在视图中使用 "vm." 符号。它与您将在控制器函数中使用的变量无关（如果这是错误的，请纠正我，但是，根据我到目前为止所学到的，情况并非如此）。

将 angular 指令范围传递给指令控制器

Pass angular directive scope to directive controller

angularjs

angularjs-directive

angularjs-scope