angularJs - 指令范围变量不绑定

Question

我的一个指令存在绑定问题，导致我出现问题。通常我没有绑定问题但我无法看到错误。我有这个指令：

radioMenuDirective.js

(function () {
    "use strict";

    var myAppModule = angular.module('myApp');


    myAppModule.directive('radioMenuAllocateSection', function () {
        return {
            templateUrl: 'Scripts/app/shared/radiomenu/tmplAllocateSection.html',
            restrict: 'E',
            scope: {
                allocatedTo: '='
            },
            controller: [
               '$scope', 'genericService', function ($scope, genericService) {
                   $scope.radio = {
                       name: 'department'
                   };
                }
            ],
        }
    });
})();

tmplAllocateSection.html

<label>Allocate Section To:</label>
<br/>
<form name="myForm" ng-controller="ExampleController" class="form-inline">
    <div class="form-group">
        <label>
            <input type="radio" ng-model="radio.name" value="department">
            Department
        </label>
        <label>
            <input type="radio" ng-model="radio.name" value="user">
            User
        </label>
        <div ng-if="radio.name == 'department'">
            {{allocatedTo}}
            <department-dropdown department="allocatedTo"></department-dropdown>
        </div>
        <div ng-if="radio.name == 'user'">
            {{allocatedTo}}
            <user-dropdown user="allocatedTo"></user-dropdown>
        </div>

    </div>
</form>

我可以使用

在我的指令中看到范围变量

  

{{allocatedTo}}

然而，这个指令高于另一个

tmplSectionCategories.html

<form role="form" name="frmContactDetails">
    the enquiry data: {{enquiryData.selectedPersonOrDep}}

    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Section Categories:</h3>
            </div>
            <h6>
                <div class="panel-body">
                    <div class="form-group col-md-6 ignore-left-padding">
                        <subject-topic-dropdown selected-subject="enquiryData.subject" selected-topic="enquiryData.topic"></subject-topic-dropdown>
                        <keywords-dropdown selected-subject="enquiryData.subject"></keywords-dropdown>

                        <div class="form-group col-md-12 ignore-left-padding">
                            <genus-dropdown selected-genus="enquiryData.genus"></genus-dropdown>
                        </div>

                        <plant-names-dropdown selected-plant="enquiryData.plant"></plant-names-dropdown>

                    </div>
                    <div class="form-group col-md-6 ignore-left-padding">
                        <department-keyword-dropdown selected-department="enquiryData.department" selected-keyword="enquiryData.keyword"></department-keyword-dropdown>
                        <div class="form-group col-md-12 ignore-left-padding">
                            <label class="col-md-12 control-label ignore-left-padding">Quantity:</label>
                            <div class="col-md-8 ignore-left-padding">
                                <div class="col-md-2 ignore-left-padding">
                                    <input type="number" ng-model="enquiryData.quantity" class="form-control input-sm" style="width: 50px" min="0" />
                                </div>
                            </div>
                        </div>
                        <radio-menu-allocate-section allocated-to="enquiryData.selectedPersonOrDep"></radio-menu-allocate-section>
                    </div>
                </div>
            </h6>
        </div>
    </div>
</form>

在页面上声明的指令

<radio-menu-allocate-section allocated-to="enquiryData.selectedPersonOrDep"></radio-menu-allocate-section>
                    </div>

  

{{enquiryData.selectedPersonOrDep}}

当下拉列表发生变化时，这并不会显示任何内容，因此我在选择值后无法获得该值时会遇到问题。我需要上面的按钮点击处理程序。