Question

我有一个指令，它是我将在应用程序中重复使用的国家/地区的下拉列表。我已经创建了一个链接函数，因此我可以将数据返回给控制器，该控制器绑定到使用该指令的视图。

directive.js

myAppModule.directive('countryDropdown', ['genericService', function (genericService) {
        return {
            templateUrl: 'Scripts/app/templates/tmplCountryDropdown.html',
            restrict: 'E',
            scope: {
                "dirListOfCountries": "="
            },
            link: function () {
                $scope.selectedCountry = "";
                $scope.getCountries = function() {
                    genericService.doQuery("search", "countries").then(function (data) {
                        $scope.dirListOfCountries = data;
                    });
                }
            },
        }
    }]);

对指令的引用

<div class="form-group">
    <label for="country">Country:</label>
    <country-dropdown dir-list-of-countries="getCountries()"></country-dropdown>
</div>

controller.js

(function() {
    "use strict";
    var myAppModule = angular.module('myApp');

    myAppModule.controller('contactsearchController', [
         '$scope', '$state', '$stateParams', 'genericService', 'sessionData', 'localStorageService',
        function ($scope, $state, $stateParams, genericService, sessionData, localStorageService) {

            $scope.memberSearch = function (type) {
                genericService.doQueryByObj("search", type, null, null, {
                    ContactId: $stateParams.searchParam,
                    Postcode: $stateParams.searchParam,
                    EndUserNetworkLoginName: 'RHSNET\\nickgowdy',
                    // RowStart and RowEnd needed or query won't return data :(
                    RowStart: 1,
                    RowEnd: 32
                }).then(function (data) {
                    $scope.memberData = data;
                });
            }

            $scope.getCountries = function(valFromDirective) {
                console.log(valFromDirective);
            }

        }
    ]);
})();

此时我的指令中出现此错误，表示$ scope未定义。

ReferenceError: $scope is not defined
    at link (http://localhost:60541/Scripts/app/directives/directives.js:27:17)
    at http://localhost:60541/Scripts/angular.js:8644:44
    at invokeLinkFn (http://localhost:60541/Scripts/angular.js:8650:9)
    at nodeLinkFn (http://localhost:60541/Scripts/angular.js:8150:11)
    at http://localhost:60541/Scripts/angular.js:8380:13
    at processQueue (http://localhost:60541/Scripts/angular.js:14567:28)
    at http://localhost:60541/Scripts/angular.js:14583:27
    at Scope.$get.Scope.$eval (http://localhost:60541/Scripts/angular.js:15846:28)
    at Scope.$get.Scope.$digest (http://localhost:60541/Scripts/angular.js:15657:31)
    at Scope.$get.Scope.$apply (http://localhost:60541/Scripts/angular.js:15951:24) <country-dropdown dir-list-of-countries="getCountries()" class="ng-isolate-scope">(anonymous function) @ angular.js:12330$get @ angular.js:9109invokeLinkFn @ angular.js:8652nodeLinkFn @ angular.js:8150(anonymous function) @ angular.js:8380processQueue @ angular.js:14567(anonymous function) @ angular.js:14583$get.Scope.$eval @ angular.js:15846$get.Scope.$digest @ angular.js:15657$get.Scope.$apply @ angular.js:15951done @ angular.js:10364completeRequest @ angular.js:10536requestLoaded @ angular.js:10477

我想解决这个错误并让它让我的控制器可以访问我的指令值。

Answer 1

首先：

link: function(scope, elem, attrs) {
    scope.getCountries ....
}

角度指令中的

链接函数设置了参数，您可以根据需要为它们命名，它们总是相同：

link: function(crap, shoot, stall, monkey) {
    // crap === scope
    // shoot === element (current element)
    // stall === attributes (of the current element)
    // monkey === controller you might inject into the directive, like if you are inheriting another directives controller for example.

}

为了澄清，通常的命名约定是（scope，elem，attrs，ctrlName）

您的代码的另一部分是错误的是您传递函数的方式。在指令中它应该如下：

scope: {
            "dirListOfCountries": "&"
        },

链接功能中的

：

scope.getCountries = function() {
                genericService.doQuery("search", "countries").then(function (data) {
                    scope.dirListOfCountries({data: data})
                });
            }

然后在你的html中你想要：

<country-dropdown dir-list-of-countries="getCountries(data)"></country-dropdown>

我认为这会让你更接近。

Answer 2

您需要在此指令中注入$scope

    link: function ($scope) {
        $scope.selectedCountry = "";
        $scope.getCountries = function() {
            genericService.doQuery("search", "countries").then(function (data) {
                $scope.dirListOfCountries = data;
            });
        }
    },

角度指令返回值中的链接功能

2 个答案: