Sử dụng ControllerAs với Chỉ thị

Question

Tôi đang cố gắng làm theo hướng dẫn theo phong cách góc cạnh của John Papa here và đã bắt đầu chuyển hướng dẫn của tôi sang sử dụng controllerAs. Tuy nhiên, điều này không hoạt động. Mẫu của tôi dường như không thể truy cập vào bất kỳ thứ gì được gán cho vm. Xem ví dụ plnkr rất đơn giản này thể hiện hành vi.

http://plnkr.co/edit/bVl1TcxlZLZ7oPCbk8sk?p=preview

angular 
    .module('app', []); 

angular 
    .module('app') 
    .directive('test', test); 

function test() { 
    return { 
     restrict: 'E', 
     template: '<button ng-click="click">{{text}}</button>', 
     controller: testCtrl, 
     controllerAs: 'vm' 
    } 
} 

angular 
    .module('app') 
    .controller('testCtrl', testCtrl); 

function testCtrl() { 
    var vm = this; 
    vm.text = "TEST"; 
} 

Answer 1

Khi sử dụng controllerAs cú pháp bạn không truy cập phạm vi $ như bạn sẽ bình thường, vm biến được bổ sung vào phạm vi, vì vậy nút của bạn cần phải trở thành:

<button ng-click="click">{{vm.text}}</button>

Lưu ý rằng vm. được thêm vào đầu text.

Here is a fork of your Plunk with the fix applied

---

Q: Bạn có biết làm thế nào tôi sẽ truy cập vào các thuộc tính đi qua như là thuộc tính để chỉ thị, ví dụ "phạm vi: {text: '@'}"? Tôi sau đó buộc phải sử dụng $ phạm vi trên bộ điều khiển và thiết lập vm.text = $ scope.text?

A: Trong bài viết bạn tham chiếu, có a section y075 chỉ nói về kịch bản này. Nhìn vào bindToController:

return { 
    restrict: 'E', 
    template: '<button ng-click="click">{{text}}</button>', 
    controller: testCtrl, 
    controllerAs: 'vm', 
    scope: { 
     text: '@' 
    }, 
    bindToController: true // because the scope is isolated 
}; 

Sau đó, bạn sẽ có thể truy cập vào vm.text

Answer 2

Với "controllerAs", bộ điều khiển dụ alias - vm, trong trường hợp của bạn - được công bố trên phạm vi như .vm tài sản của phạm vi.

Vì vậy, để truy cập các thuộc tính của nó (tức là các thuộc tính của bộ điều khiển), bạn cần phải chỉ định {{vm.text}} hoặc ng-click="vm.click".

Answer 3

Khi bạn sử dụng controllerAs cú pháp, sau đó bạn phải sử dụng

bindToController: true 

nó sẽ làm việc trong chỉ thị của bạn.

Answer 4

Khi sử dụng cú pháp 'controllerAs', như trên, phạm vi được ràng buộc với tham chiếu '' của tài khoản này là '. Vì vậy, nó cho phép chúng tôi giới thiệu một không gian tên mới ('vm' tại đây) được liên kết với bộ điều khiển của chúng tôi mà không cần đặt thuộc tính phạm vi trong một đối tượng bổ sung (ví dụ: $ scope). Vì vậy, việc tiếp cận bất cứ điều gì trong phạm vi điều khiển của, đòi hỏi 'vm' namespace, như,

'<button ng-click="click">{{vm.text}}</button>'