anglejs関数from html戻り値

Question

私はAngularJSを初めて使っています。

私はhtmlから関数を呼び出したいと思います。

<td> 
    {{getComponentSubtype(component.ID)}} 
</td> 

ただし、関数はwebapiを呼び出し、コールバックを待機します。どのようにデータをHTMLに表示するのですか？

Answer 1

HTMLから関数を呼び出し、コールバックを受け取ったらその値をHTMLで出力可能なJSONオブジェクトに格納します。

{{ getComponentSubtype(component.ID) }} 

<td ng-if="componentsSubType[component.ID] != null"> 
    {{ componentsSubType[component.ID] }} 
</td> 
<td ng-if="componentsSubType[component.ID] == null">Loading Component ...</td> 

コントローラー：

function getComponentSubtype(componentId) { 
    apiService.get('/api/components/' + componentId + '/componentSubtype', config, 
    function(result) { 
     if ($scope.componentsSubType == null) { 
      $scope.componentsSubType = {}; 
     } 

     $scope.componentsSubType[componentId] = result; 
    }, 
    function() { 
     if ($scope.componentsSubType == null) { 
      $scope.componentsSubType = {}; 
     } 

     $scope.componentsSubType[componentId] = "Load Failed"; 
    }); 
} 

注：私はHTMLにあなたがループからcomponentを取得していることを想定している一方、UI

HTMLでのロードメッセージを表示（ng-repeat）

Answer 2

これは理想的ではない可能性がありますが、より良い解決方法を知る必要があります。

あなたのテンプレートにその種類やアクセスを格納するオブジェクトを使用することができます。各コンポーネントのidの

<td>{{ componentSubtypes[component.id] }}</td> 

コールgetComponentSubtype：あなたのHTML内

$scope.componentSubtypes = {}; 

components.forEach(function(component) { 
    getComponentSubtype(component.id); 
}); 

function getComponentSubtype(componentId) { 
    apiService.get('/api/components/' + componentId + '/componentSubtype', config, 
     getComponentSubtypeCompleted(componentId), 
     getComponentSubtypeFailed); 
} 

// Using a closure here for the id 
function getComponentSubtypeCompleted(id) { 
    return function(result) { 
     $scope.componentSubTypes[id] = result; 
     // ... 
    } 
} 

Answer 3

...

<td>{{myvariable}}</td> 

（コントローラ内）...

angular.module('yourApp').controller('ControllerName', function($scope, apiService) { 
$scope.myvariable = 'please wait'; 
function initComponent(id) { 
    apiService.get('/api/components/' + id + '/componentSubtype').then(function(response) { 
     $scope.myvariable = response; 
    }).catch(function(failedResponse) { 
     // handle failure here 
     console.log('oops', failedResponse); 
    }); 
} 

initComponent(500); 

});