AngularJS：从http呼叫模型数据指令不可用 [英] AngularJS: model data from http call not available in directive

问题描述

有似乎是一个臭虫从HTTP调用获取模型数据是在$范围present而不是在一个指令。这里是code，它说明了这个问题：

There seems to be a bug where model data fetched from an http call is present in the $scope but not in a directive. Here is the code that illustrates the problem:

的jsfiddle： http://jsfiddle.net/supercobra/hrgpc/

Jsfiddle: http://jsfiddle.net/supercobra/hrgpc/

var myApp = angular.module('myApp', []).directive('prettyTag', function($interpolate) {
return {
    restrict: 'E',
    link: function(scope, element, attrs) {
      var text = element.text();
        //var text = attrs.ngModel;   
        var e = $interpolate(text)(scope);
        var htmlText = "<b>" + e + "</b>";
        element.html(htmlText);
    }
};
});

function MyCtrl($scope, $http, $templateCache) {
$scope.method = 'JSONP';
$scope.url = 'http://angularjs.org/greet.php?callback=JSON_CALLBACK&name=Super%20Hero';

$scope.fetch = function () {
    $scope.code = null;
    $scope.response = null;

    $http({
        method: $scope.method,
        url: $scope.url,
        cache: $templateCache
    }).
    success(function (data, status) {
        $scope.status = status;
        $scope.data = data;
    }).
    error(function (data, status) {
        $scope.data = data || "Request failed";
        $scope.status = status;
    });
};

}

在HTML

<div ng-controller="MyCtrl">
<h1>Angular $http call / directive bug</h1>
<p>This fiddle illustrates a bug that shows that model w/ data fetched via an http call
is not present within a directive.</p>
<hr>
<h2>HTTP call settings</h2>
<li>Method: {{method}}
    <li>URL: {{url}}
        <br>
        <button ng-click="fetch()">fetch</button>
        <hr/>
         <h3>HTTP call result</h3>

        <li>HTTP response status: {{status}}</li>
        <li>HTTP response data: {{data}}</li>
            <hr/>
            <h2>Pretty tag</h2>
            <pretty-tag>make this pretty</pretty-tag>

            <hr/>
            <h3 style="color: red" >Should show http response data within pretty tag</h3>
            [<pretty-tag>{{data}}</pretty-tag>] // <=== this is empty

</div>

的jsfiddle： http://jsfiddle.net/supercobra/hrgpc/

任何帮助AP preciated。

Any help appreciated.

推荐答案

您要更换的指令的内容指令的执行。由于$ http请求是异步，该指令之前的数据是检索和分配给该范围完成

You are replacing the content of the directive in your directive implementation. Since the $http request is async, the directive completes before the data is retrieve and assigned to the scope.

派人监视数据变量指令内，然后重新呈现的内容，像

Put a watch on data variable inside the directive and then re-render the content, something like

 scope.$watch(attrs.source,function(value) {
                var e = $interpolate(text)(scope);
                var htmlText = "<b>" + e + "</b>";
                element.html(htmlText);
            });

基于@Marks反馈和您的要求

我有更新的小提琴
http://jsfiddle.net/cmyworld/V6sDs/1/

Based on @Marks feedback and your request i have update fiddle http://jsfiddle.net/cmyworld/V6sDs/1/

这篇关于AngularJS：从http呼叫模型数据指令不可用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！