javascript - 只有 AngularJS 页面上的最后一个指令保持其绑定(bind)

Question

我有几个指令，我打算将它们作为可重用元素，因此我使用范围隔离。每个指令都有自己的专用 Controller ，它根据 url 从 mongo 中提取数据。

问题是页面上只有最后一个指令显示了它所绑定(bind)的数据。无论我将指令按什么顺序放置，只有最后一个有效，并且每一个都有效。例如，我确实将客户转储到日志中，但 {{ 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>

指令 html

<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>

Answer 1

您的 controllerAs 语法对我来说似乎有点可疑，您可以尝试一下吗:

Controller :

    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.appointments