javascript - 从 Angular 指令中的 templateURL 访问 ID

Question

我的指令会导致学校下降

function campuses(){
    return{
        restrict: "AE",
        scope:{
            display: "@",
            optGroup: "@",
            orderBy: "@",
            showGrades: "@",
            dirClass: "@",
            campusCls: "@",
            gradeCls: "@"
        },
        transclude: true,
        templateUrl: "XXXX/XXXXX/campus-dropdown/campus-template.html",
        controller: campusCtrl,
        link: campusLink
    }
}

模板 URL 正在加载的 HTML 文件

<div class="form-group {{campusCls}}">
<select
id="campus-dropdown" 
class="form-control" 
ng-model="campusModel" 
ng-options="item.campusNum as item.campusLabel {{customGroupBy}} for item in campusList {{customOrderBy}} track by item.campusNum"
title="{{display}} campuses">
    <option value="">Select all Campuses</option>
</select>

我遇到的主要问题是将 ID 校区纳入我的指令中。 每次我尝试 document.getelementbyid 或 $('#campus-dropdown') 时，我只能返回空值

我尝试在 Controller 和链接中访问此变量，但仍然不走运

Answer 1

您正在使用以下指令在指令中创建隔离范围:

scope:{ display: "@", optGroup: "@", ...}

工作中plunk

您需要创建/使用一个名为范围以外的名称的自定义属性。

在你的 Controller 中:

$scope.foo = {
        display: "",
        optGroup: "",
        orderBy: "",
        showGrades: "",
        dirClass: "",
        campusCls: "",
        gradeCls: ""
    }

HTML:

<campus-dir foo="{{foo}}"></campus-dir>

指令:

foo: "@"