Angular JS - Ràng buộc dữ liệu trong chỉ thị không hoạt động

Question

Tôi gặp vấn đề với một ràng buộc dữ liệu bên trong một chỉ thị, nó gọi một chỉ thị khác.

Đây là chỉ thị chính:

var app = angular.module('app'); 

app.directive("myMainDirective", function ($http) { 
return { 
    scope: { 
     paramId: '=' 
    }, 
    link: function (scope) { 
     $http.get('some/url/' + scope.paramId+ '.json' 
     ).success(function (data) { 
       scope.idFromServer = data; 
      }); 
    }, 
    template: '<span other-directive id="idFromServer"></span>' 
} 
}); 

Dưới đây là các chỉ thị khác:

var app = angular.module('app'); 

app.directive("otherDirective", ['$http', function(http) { 
return { 
    template: "<span>{{name}}</span>", 
    scope: { 
     id: "=" 
    }, 
    link: function(scope) { 
     http.get('another/url/' + scope.id + '.json').then(function(result) { 
      scope.name = result.data.name; 
     }, function(err) { 
      scope.name = "unknown"; 
     }); 
    } 
} 
}]) 

Và cuộc gọi HTML code Mà chỉ thị chính:

<span my-main-directive param-id="myObject.id"></span> 

Khi gọi " chỉ thị khác "," idFromServer "không phải là ràng buộc, và là" không xác định ", do đó, nó kết quả để diplay" undefined ".

Tôi có thể thiếu thứ gì đó ngu ngốc, nhưng tôi không thấy cái gì ... (Đoạn mã của tôi có thể không tốt nhất, tôi khá mới với angularjs, và đặc biệt là chỉ thị, và tôi đã thử rất nhiều cách để thực hiện những gì tôi muốn.)

Answer 1

mỗi ý kiến ​​của tôi, đây là một cách mà có thể làm việc, sử dụng một chiếc đồng hồ $ phạm vi:.

scope.$watch('id', function(id) { 
    $http.get('some/url/' + id + '.json') 
     .success(function (data) { 
      scope.idFromServer = data; 
     }); 
}; 

này sẽ đi bên trong hàm liên kết trên các chỉ lồng nhau.

Answer 2

Kể từ javascript là không đồng bộ, hai yêu cầu ajax của bạn đang chạy tại về cơ bản cùng một lúc và id là undefined khi yêu cầu trong other-directive chạy.

Nếu bạn muốn thử nghiệm điều này, chỉ cần đặt giá trị mặc định cho idFromServer. Yêu cầu trong other-directive sẽ chạy với giá trị mặc định.

EDIT: để trả lời nhận xét của bạn, đó là một câu hỏi khá rộng và có nhiều giải pháp. Câu trả lời hay nhất mà tôi có thể cung cấp cho bạn đơn giản, không bao giờ chạy bất kỳ logic nào trong hàm liên kết của bạn, chỉ cần xác định hành vi và thuộc tính của chỉ thị - đó là chức năng của liên kết. Mẫu được sử dụng ngay lập tức và bạn không thể thay đổi mẫu đó.

Trong trường hợp này, bạn có thể lấy dữ liệu được chuẩn bị trong phạm vi gốc và chuyển dữ liệu vào các thuộc tính.

Answer 3

Một trong những cách mà tôi muốn đề nghị là không sử dụng hai cách (=) bắt buộc đối với idFromServer biến, sử dụng {{idFromServer}} chỉ Interpolation để gán giá trị cho thuộc tính, sau đó sử dụng & $attr.$observe nó sẽ gọi khi nội suy được đánh giá.

myMainDirective

app.directive("myMainDirective", function ($http) { 
return { 
    scope: { 
     paramId: '=' 
    }, 
    link: function (scope) { 
     $http.get('some/url/' + scope.paramId+ '.json' 
     ).success(function (data) { 
       scope.idFromServer = data; 
      }); 
    }, 
    template: '<span other-directive id="{{idFromServer}}"></span>' 
} 
}); 

otherDirective

app.directive("otherDirective", ['$http', function(http) { 
    return { 
     template: "<span>{{name}}</span>", 
     scope: true, //isolated scope 
     link: function(scope, element, attr) { 
      attr.$observe(attr.id, function(newVal) { 
       http.get('another/url/' + newVal + '.json').then(function(result) { 
        scope.name = result.data.name; 
       }, function(err) { 
        scope.name = "unknown"; 
       }); 
      }); 
     } 
    } 
}])