Lỗi: Biểu thức mô hình không thể gán: undefined

Question

Tôi đang cố gắng viết các kiểm tra cho một chỉ thị, vì vậy tôi đang xây dựng nó bằng tay với $compile. (Có, tôi biết rằng tôi có thể sử dụng thử nghiệm e2e cho điều này, nhưng trong trường hợp này tôi muốn thử nghiệm một số logic độc lập DOM vì vậy tôi đang sử dụng phương pháp thử nghiệm đơn vị.)

Tôi có một trường mà tôi đang ràng buộc với scope: {foo: '='}. Khi tôi cố gắng đặt nó trên phạm vi của chỉ thị, tôi nhận được lỗi sau:

Error: Non-assignable model expression: undefined (directive: foo) 
    at Error (<anonymous>) 
    at $get.parentSet (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:4146:25) 
    at Object.<anonymous> (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:4160:23) 
    at Object.$get.Scope.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:7693:38) 
    at Object.$get.Scope.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:7894:24) 
    at SNAKE_CASE_REGEXP (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:930:13) 
    at Object.invoke (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:2788:25) 
    at bootstrap (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:928:12) 
    at angularInit (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:904:5) 
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js:14397:5 

Đã sao chép trong fiddle này.

Answer 1

Trong chỉ thị của bạn, bạn có:

scope: { 
    bar: '=' 
} 

Điều này có nghĩa nó sẽ nhìn vào yếu tố chỉ thị (<div foo></div>) cho một tên thuộc tính "thanh" và làm một liên kết dữ liệu hai chiều trong Chỉ thị của bạn và đối tượng được chỉ định cho thuộc tính. Vì vậy, trước tiên, bạn cần phải thêm thuộc tính bar, và sau đó bạn cần phải có một cái gì đó đặt trong phạm vi của bạn với tên của giá trị của thuộc tính. Xem http://jsfiddle.net/u4BTu/6/

Answer 2

Một nguyên nhân có thể có của lỗi này là bỏ qua để tính đến số normalization của Angular. Ví dụ, nếu bạn có chỉ thị sau:

<my-directive parameter-one="foo" parameter_two="bar"></my-directive> 

Với tuyên bố phạm vi này:

scope: { 
    'parameter-one': '=', 
    parameter_two: '=', 
} 

Bạn sẽ nhận được lỗi này. Để sửa chữa, hãy sử dụng các phiên bản được chuẩn hóa để khai báo phạm vi:

scope: { 
    parameterOne: '=', 
    parameterTwo: '=', 
}