2014-06-17 27 views
10

Tôi đang gặp rắc rối làm việc ra làm thế nào tôi có thể xác định một chỉ thị tùy chỉnh mà cả hai:góc chỉ thị: sử dụng ng mô hình trong phạm vi cô lập

  1. Sử dụng cô lập phạm vi, và
  2. Sử dụng chỉ thị ng-mô hình trong phạm vi mới bên trong mẫu của nó.

Dưới đây là một ví dụ:

HTML:

<body ng-app="app"> 
    <div ng-controller="ctrl"> 
    <dir model="foo.bar"></dir> 
    Outside directive: {{foo.bar}} 
    </div> 
</body> 

JS:

var app = angular.module('app',[]) 
    .controller('ctrl', function($scope){ 
    $scope.foo = { bar: 'baz' }; 
    }) 
    .directive('dir', function(){ 
    return { 
     restrict: 'E', 
     scope: { 
     model: '=' 
     }, 
     template: '<div ng-if="true"><input type="text" ng-model="model" /><br/></div>' 
    } 
    }); 

Các hành vi mong muốn ở đây là giá trị của đầu vào chắc chắn sẽ sở hữu foo.bar phạm vi bên ngoài của, qua phạm vi của chỉ thị (cô lập) phạm vi model tài sản. Điều đó không xảy ra, bởi vì chỉ thị ng-if trên div kèm theo của mẫu tạo ra một phạm vi mới, do đó, nó là phạm vi model của phạm vi được cập nhật, không phải là phạm vi của chỉ thị. Thông thường bạn giải quyết các vấn đề ng-mô hình này bằng cách đảm bảo có một dấu chấm trong biểu thức, nhưng tôi không thể thấy bất kỳ cách nào để làm điều đó ở đây. Tôi tự hỏi nếu tôi có thể có thể sử dụng một cái gì đó như thế này cho chỉ thị của tôi:

{ 
    restrict: 'E', 
    scope: { 
    model: { 
     value: '=model' 
    } 
    }, 
    template: '<div ng-if="true"><input type="text" ng-model="model.value" /><br/></div>' 
} 

nhưng điều đó không làm việc ...

Plunker

Trả lời

9

Bạn đang đúng - ng-nếu tạo phạm vi con gây ra sự cố khi văn bản được nhập vào trường văn bản nhập. Nó tạo ra một thuộc tính shadow có tên là 'model' trong phạm vi con mà là một bản sao của biến phạm vi cha có cùng tên - có hiệu quả phá vỡ ràng buộc mô hình hai chiều.

Việc sửa lỗi này rất đơn giản. Trong mẫu của bạn, hãy chỉ định tiền tố $ parent:

template: '<div ng-if="true"> 
        <input type="text" ng-model="$parent.model" /><br/> 
      </div>' 

Điều này đảm bảo rằng mô hình sẽ giải quyết mô hình hai chiều ràng buộc qua phạm vi phân lập.

Cuối cùng, '.' trong ng-model tiết kiệm trong ngày. Tôi thấy hữu ích khi nghĩ về bất cứ điều gì còn lại của dấu chấm như là một cách để Angular giải quyết tài sản thông qua thừa kế phạm vi. Không có dấu chấm, việc giải quyết thuộc tính chỉ trở thành một vấn đề khi chúng ta gán các biến phạm vi (nếu không, tra cứu là tốt, bao gồm các biểu thức ràng buộc chỉ đọc {{model}}).

+1

Cảm ơn - Tôi hoàn toàn quên về $ parent.Điều này giải quyết được vấn đề của tôi trong trường hợp này, nhưng tôi vẫn hơi lưỡng lự về nó như một giải pháp đa năng: nó có nghĩa là tôi phải theo dõi các phạm vi mới được giới thiệu trong các mẫu của mình và cấp bậc nào của thứ bậc mà tôi cần mục tiêu, có vẻ như khá dễ bị lỗi ... – Duncan

+0

Tôi đồng ý với bạn. Misko giải thích rằng ai đó đăng nhập một lỗi về điều này khoảng một lần một tuần - nó không thực sự là một lỗi, đó là cách thức hoạt động thừa kế nguyên mẫu. Để thiết lập đúng mô hình ng, bạn cần biết cách kế thừa phạm vi hoạt động ở mức độ sâu hơn, và các chỉ thị nào sẽ tạo ra các phạm vi con. Tôi không thể nghĩ ra một cách tốt hơn. – pixelbits

+0

Vâng, điểm công bằng, mặc dù tôi đoán những gì tôi đã nhận được là có một vấn đề cụ thể với việc sử dụng ng-model = "$ parent.bar" như trái ngược với ng-model = "foo.bar", trong đó với Tôi luôn luôn phải suy nghĩ về nơi mà phạm vi con đang được tạo ra, trong khi với những thứ sau tôi không (miễn là tôi có thể giả định rằng không có phạm vi con có một tài sản gọi là 'foo'). – Duncan

0

ng-if tạo ra một phạm vi prototypally kế thừa thêm, vì vậy ng-model="model" liên kết với thuộc tính được thừa kế của phạm vi mới và không gắn với thuộc tính được liên kết 2 chiều của phạm vi chỉ thị.

Thay đổi thành ng-show và nó sẽ work.

Bạn có thể sử dụng a small Firebug extension Tôi đã viết để kiểm tra phạm vi góc.

+0

Vâng, tôi hiểu rằng đó là những gì đang xảy ra - Tôi đã sử dụng ng-nếu có mục đích chỉ để chứng minh vấn đề – Duncan

Các vấn đề liên quan