Javascript 只有AngularJS页面上的最后一条指令维护它'；s绑定

我有几个指令，我打算成为可重用的元素，所以我使用范围隔离。每个指令都有自己的专用控制器，该控制器根据url从mongo提取数据

问题是，页面上只有最后一个指令显示它绑定到的数据。不管我把指令放在什么顺序，只有最后一个有效，每个都有效。例如，我确实将客户转储到日志中，但是{{here}}中不会显示任何内容，除非它是页面中的最后一个指令

我相当肯定这是一个范围问题，但这些都是为了重用而隔离的，所以为什么它们会相互忽略呢

关于代码

js

.controller('getCustomerList',function(customerIOService){
    _this = this;
    _this.customers = {};
    customerIOService.list()
                    .success(function(data, status, headers, config){
                        _this.customers = data;
                    })
                    .error(function(data, status, headers, config){
                        console.log('error Data :: ');
                        //console.log(data);
                        if(status == 403){
                            _this.error = 'You need to be logged in to view this page.';
                        }else{
                            _this.error = 'An error occured during the customer list request.';
                        }
                    });
})
.controller('getCustomerAppointments',function(customerIOService){
    _this = this;
    _this.appointments = {};
    customerIOService.getAppointments()
                    .success(function(data, status, headers, config){
                        _this.appointments = data;
                        //console.log(data);
                    })
                    .error(function(data, status, headers, config){
                        console.log('error Data :: ');
                        //console.log(data);
                        if(status == 403){
                            _this.error = 'You need to be logged in to view this page.';
                        }else{
                            _this.error = 'An error occured during the appointments list request.';
                        }
                    });
})
.controller('getCustomerSingle', function(customerIOService) {
    _this = this;
    _this.customer = {};
    _this.updateSuccess = false;

    customerIOService.one()
                    .success(function(data, status, headers, config){
                        _this.customer = data;
                        console.log(data);
                    })
                    .error(function(data, status, headers, config){
                        console.log('error Data :: ');
                        //console.log(data);
                        if(status == 403){
                            _this.error = 'You need to be logged in to view this page.';
                        }else{
                            _this.error = 'An error occured during the customer fetch request.';
                        }
                    });

    _this.update = function(){
        customerIOService.update(_this.customer)
                    .success(function(data, status, headers, config){
                        _this.customer = data;
                        _this.updateSuccess = true;
                    })
                    .error(function(data, status, headers, config){
                        console.log('error Data :: ');
                        //console.log(data);
                        if(status == 403){
                            _this.error = 'You need to be logged in to view this page.';
                        }else{
                            _this.error = 'An error occured during the customer update.';
                        }
                    });
    }
})
.directive('customerList',function() {
    return {
      scope: {},
      restrict:'E',
      templateUrl: 'views/templates/customersList.html',
      replace: true,
      controller: 'getCustomerList',
      controllerAs: 'ctrl'
    };
})
.directive('customerSingle',function() {
    return {
      scope: {},
      restrict:'E',
      templateUrl: 'views/templates/customersSingle.html',
      replace: true,
      controller: 'getCustomerSingle',
      controllerAs: 'singleCustCtrl'
    };
})
.directive('customerAppointments',function() {
    return {
      scope: {},
      restrict:'E',
      templateUrl: 'views/templates/customersAppointmentsList.html',
      replace: true,
      controller: 'getCustomerAppointments',
      controllerAs: 'custApptCtrl'
    };
})

父html

<section>
    <div class="sectionHeader oswald font-light panel panel-default panel-body panel-success text-center">Customer Update</div>

    <div class="panel panel-default panel-body panel-success">
        <customer-single></customer-single>
    </div>

    <div class="panel panel-default panel-body panel-success">
        <customer-appointments><customer-appointments/>
    </div>

    <div class="panel panel-default panel-body panel-success">
        <customer-list><customer-list/>
    </div>
</section>

<span>
    <a href="/appointments/create/{{custApptCtrl.customer._id}}">
            <span class="fa-stack fa-lg pull-left">
                <i class="fa fa-plus fa-stack-1x "></i>
            </span>
            Add Appointment
        </a>

<table class="table table-striped">
    <thead>
      <tr>
        <th>Caregiver</th>
        <th>Start</th>
        <th>End</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="appt in custApptCtrl.appointments">
        <td>{{ appt.employee.lastName }}, {{ appt.employee.firstName }}</td>
        <td>{{ appt.startDate }}</td>
        <td>{{ appt.endDate }}</td>
        <td><a href="/appointments/{{appt._id}}"><span class="glyphicon glyphicon-pencil"></span></a></td>
      </tr>
      </a>
   </tbody>
</table>
</span>

客户更新

指令html

<section>
    <div class="sectionHeader oswald font-light panel panel-default panel-body panel-success text-center">Customer Update</div>

    <div class="panel panel-default panel-body panel-success">
        <customer-single></customer-single>
    </div>

    <div class="panel panel-default panel-body panel-success">
        <customer-appointments><customer-appointments/>
    </div>

    <div class="panel panel-default panel-body panel-success">
        <customer-list><customer-list/>
    </div>
</section>

<span>
    <a href="/appointments/create/{{custApptCtrl.customer._id}}">
            <span class="fa-stack fa-lg pull-left">
                <i class="fa fa-plus fa-stack-1x "></i>
            </span>
            Add Appointment
        </a>

<table class="table table-striped">
    <thead>
      <tr>
        <th>Caregiver</th>
        <th>Start</th>
        <th>End</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="appt in custApptCtrl.appointments">
        <td>{{ appt.employee.lastName }}, {{ appt.employee.firstName }}</td>
        <td>{{ appt.startDate }}</td>
        <td>{{ appt.endDate }}</td>
        <td><a href="/appointments/{{appt._id}}"><span class="glyphicon glyphicon-pencil"></span></a></td>
      </tr>
      </a>
   </tbody>
</table>
</span>

照顾者
开始
终点
行动
{{appt.employee.lastName}，{{appt.employee.firstName}
{{appt.startDate}
{{appt.endDate}

你的

controllerAs

语法对我来说有点可疑，你能试试这个吗：

控制器：

    app.controller('xyz', function() {
       var xyzVm = this;
      // and now use this xyzVm instead of _this everywhere in the controller
    });

然后在你的指令中

.directive('customerList',function() {
    return {
      scope: {},
      restrict:'E',
      templateUrl: 'views/templates/customersList.html',
      replace: true,
      controller: 'xyz',
      controllerAs: 'xyzVm'
    };
})

---

因此，现在您的模板可以在中继器内使用

xyzVm.appointment

Well dang。那很容易。钉在头上。将在3分钟内将其标记为已回答。我假设每个dom注入都会重写它，对吗？