AngularJS中如何让指令关联控制器并访问其作用域？

方案一：通过隔离作用域双向绑定（推荐） #

这是AngularJS指令与父作用域交互的标准方式，既保持指令的封装性，又能安全地和父作用域交互。

1. 修改指令的隔离作用域定义 #

在指令的scope对象中添加需要绑定的变量，使用=实现双向绑定：

function categoryFiltersDirective() {
    return {
        restrict: 'E',
        scope: {
            model: '=',
            disabled: '=',
            onChange: '&',
            // 添加需要绑定的父作用域变量
            categories: '=',
            categoryOptions: '=',
            filtersStaging: '=',
            batch: '='
        },
        templateUrl: BASE_URL + '/lib/EbayPartsFinder/CategoryFilters.html',
        link: categoryFiltersLinkFn
    };
}

2. 在HTML中传递父作用域变量 #

使用指令时，将控制器中的对应变量通过属性传递给指令：

<category-filters 
    model="yourModel"
    disabled="isDisabled"
    on-change="handleFilterChange()"
    categories="Categories"
    category-options="CategoryOptions"
    filters-staging="FiltersStaging"
    batch="Batch">
</category-filters>

注：HTML属性使用短横线分隔，AngularJS会自动映射到指令scope中的驼峰命名。

3. 在指令中访问/修改变量 #

现在可以在指令的link函数中直接操作这些绑定的变量，修改会同步到父控制器：

function categoryFiltersLinkFn($scope, element, attrs, ctrl, transclude) {
    
    $scope.Init = function () {
        // 访问父控制器的Categories和CategoryOptions
        console.log('分类列表:', $scope.categories);
        console.log('分类选项:', $scope.categoryOptions);

        // 若需要修改父控制器的CategoryOptions，直接操作即可
        // $scope.categoryOptions.push({ Id: 2, Description: "新增分类" });

        var category = sessionStorage.getItem(`EbayPartsFinder.BatchResults.Category.${$scope.batch.Id}`);
        var subCategory = sessionStorage.getItem(`EbayPartsFinder.BatchResults.SubCategory.${$scope.batch.Id}`);
        if (category) {
            // 修改父控制器的FiltersStaging
            $scope.filtersStaging.BatchFilters.CategoryId = category;
        }
        if (subCategory) {
            $scope.filtersStaging.BatchFilters.SubCategoryId = subCategory;
        }
    }

    $scope.Init();
}

方案二：直接使用父作用域（不推荐） #

如果不需要指令的复用性，可以取消隔离作用域，让指令直接共享父控制器的作用域：

function categoryFiltersDirective() {
    return {
        restrict: 'E',
        // 移除scope配置，或显式设置scope: false（默认值）
        templateUrl: BASE_URL + '/lib/EbayPartsFinder/CategoryFilters.html',
        link: categoryFiltersLinkFn
    };
}

此时指令的$scope与父控制器完全一致，可直接访问$scope.Categories、$scope.CategoryOptions等变量。但这种方式会让指令与父作用域强耦合，不利于维护和复用，仅适合简单场景。

关键注意事项 #

• 双向绑定=会同步指令与父作用域的变量修改，适合需要修改父数据的场景；
• 若仅需读取父变量，AngularJS 1.5+可使用单向绑定<，避免不必要的同步开销；
• 指令中用到的Batch、FiltersStaging等变量，必须通过绑定传递，否则无法访问父控制器的对应数据。

内容的提问来源于stack exchange，提问作者Vadim Buryakovsky