AngularJS - Thay đổi đầu vào bên ngoài giá trị chỉ thị được chuyển vào chỉ thị

Question

Tôi là người mới bắt đầu với Angular và tôi không thể tìm ra cách truy xuất dữ liệu từ bên ngoài một chỉ thị. Tôi có nhiều đầu vào được cập nhật và tôi cần chỉ thị để lấy dữ liệu này và làm việc với nó. Ví dụ, trong đoạn mã dưới đây, trường đầu vào đầu tiên được nối với chỉ thị và hoạt động tốt, nhưng không đưa thuộc tính chỉ thị vào trường nhập thứ hai, làm thế nào dữ liệu được nhập vào trường đó được cập nhật trong chỉ thị?

HTML:

<div ng-app="myDirective"> 
    <input type="text" ng-model="test1" my-directive> 
    <input type="text" ng-model="test2"> 
</div> 

Chỉ thị:

angular.module('myDirective', []) 
    .directive('myDirective', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      scope.$watch(attrs.ngModel, function (v) { 
       console.log('New Value from field 1: ' + v); 
       //console.log('New Value from field 2: ' + ???); 
      }); 
     } 
    }; 
}); 

Answer 1

Vì chỉ thị của bạn không tạo phạm vi mới, biến số scope bên trong phương thức liên kết của chỉ thị trỏ tới phạm vi bên ngoài chứa hai yếu tố đầu vào. Vì vậy, bạn có thể thay thế:

//console.log('New Value from field 2: ' + ???); 

với

console.log('New Value from field 2: ' + scope.test2); 

Hãy chắc chắn để nhập một số dữ liệu trong đầu vào thứ hai khi kiểm tra hoặc nó sẽ in undefined.

Here is a working fiddle

---

EDIT: Nếu bạn đã cần phải sử dụng cô lập phạm vi trong chỉ thị của bạn, bạn có thể làm như sau trong HTML của bạn:

<input type="text" ng-model="test1" my-directive="test2"> 
<input type="text" ng-model="test2"> 

Sự khác biệt ở đây bây giờ là đi qua trong mô hình test2 vào chỉ thị và thiết lập một ràng buộc với mô hình trong chỉ thị của bạn bằng cách thêm thuộc tính scope:

scope: { 
    otherInput: '=myDirective' 
    // this tells the directive to bind the local variable `otherInput` 
    // to whatever the `my-directive` attribute value is. In this case, `test2` 
}, 

Điều này cho phép bạn truy cập các giá trị đã vượt qua trong chỉ thị của bạn. Sau đó bạn sẽ thay đổi $watch es của bạn như sau:

scope.$watch(attrs.ngModel, function (v) { 
    console.log('New Value from field 1: ' + v); 
    console.log('New Value from field 2: ' + scope.otherInput); 
}); 

// notice the syntax for watching a scope variable 
scope.$watch('otherInput', function (v) { 
    console.log('New Value from field 1: ' + scope.test1); 
    console.log('New Value from field 2: ' + v); 
}); 

Tôi đã bao gồm này trong fiddle của tôi như là một ví dụ khác, test3 và test4.

Answer 2

tôi có thể giải thích rằng trong văn bản, nhưng tôi nghĩ rằng nó sẽ tốt hơn nhiều nếu bạn xem những 3 video bằng cách john lindquist:

• Isolate Scope "@"
• Isolate Scope "="
• Isolate Scope "&"

Và summary.

Chúng thực sự ngắn (~ 4 phút mỗi) nhưng rất đơn giản và hữu ích.

PS: nhân tiện, tôi cũng khuyên bạn nên xem người khác. Tất cả đều ngắn gọn và chính xác, yêu thương họ.

Answer 3

AngularJs chỉ cho phép bạn sử dụng phạm vi với nhiều cách khác nhau và làm được nhiều điều tuyệt vời mà bạn có thể sử dụng need.You phạm vi của bạn như không kế thừa, kế thừa và bị cô lập .Nếu bạn sử dụng phạm vi như bị cô lập, bạn có thể vượt qua các biến và ràng buộc nó bất cứ nơi nào bạn muốn.

đây là 2 điều mát mẻ với các ví dụ, có thể giúp bạn

http://www.w3docs.com/snippets/angularjs/change-variable-from-outside-of-directive.html

http://www.w3docs.com/snippets/angularjs/bind-variable-inside-angularjs-directive-isolated-scope.html