無法在Angular.js中使用檢索到的JSON對象

Question

這是我在角度上的第一個項目。我已經創建了一個指令。我無法插入從RESTful API提供的對象中提取的值。如在控制檯中顯示的對象是這樣的，

以下是必要的文件，

knob.js（指令）

angular.module('knob', []) 

.directive('knob', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      element.knob({ 
       fgColor: attrs.fgColor 
      }); 
     } 
    } 
}) 

dashboard.js （控制器）

myApp.controller('DashController', function($scope, $http, $cookies, $cookieStore) { 

    $http({ 
     url: site + '/company/dashboard', 
     method: "GET", 
     transformRequest: encodeurl, 
     headers: { 
      'Content-Type': 'application/x-www-form-urlencoded' 
     } 
    }).success(function(data) { 
     console.log(data); //data has the object that i want to use 
     $scope.dash = data.count; 
    }).error(function(res) { 
     console.log(res); 
    }); 

}); 

dahboard.html（圖）

<li> 
    <div class="knob_contain"> 
     <h4 class="knobs_title">Deals Left This Month</h4> 
     <input type="text" value="{{dash.profile}}" knob class="dial dialIndex"> 
    </div> 
</li> 

我想count.profile值被綁定到我用我的旋鈕輸入類型。如果需要，我會給你更多的文件。

Answer 1

更好的方法是指定一個模式，文本框一樣，

<input type="text" ng-model="dash.profile" knob class="dial dialIndex"> 

Answer 2

你可以改變你的代碼看起來像

AngulaJs代碼

var app = angular.module('app', []); 

app.service('yourService', function ($http) { 
    this.getUser = function() { 
     return $http({ url: site + '/company/dashboard', 
      method: "GET", 
      transformRequest: encodeurl, 
      headers: { 
       'Content-Type': 'application/x-www-form-urlencoded' 
      } 
    }) 
    .success(function(data) { 
     console.log(data); //data has the object that i want to use 
     $scope.dash = data; 
    }).error(function(res) { 
     console.log(res); 
    }); 
    }; 
}); 

app.controller('DashController', function($scope, $http, $cookies, $cookieStore, yourService) { 
    $scope.dash =null; 

    yourService.getUser().then(function (resp) { 
     if (resp.data !== undefined) {   
      console.log(data); //data has the object that i want to use 
      $scope.dash = data.count; 
     } 
     }) 
     .error(function(res){ 
      console.log(res); 
     }); 
}); 

app.directive('knob', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      element.knob({ 
       fgColor: attrs.fgColor 
      }); 
     } 
    } 
}); 

HTML代碼示例

< li> 
    <div class="knob_contain"> 
     <h4 class="knobs_title">Deals Left This Month</h4> 
     <input type="text" value="{{dash.profile}}" knob class="dial dialIndex"> 
    </div> 
</li> 

Answer 3

您需要在dashboard.html頁面上進行一些小改動。

對於輸入元素，ng-model屬性設置輸入框的值。詳細見的輸入而docs [文本]

因此，而不是使用

<input type="text" value="{{dash.profile}}" knob class="dial dialIndex"> 

使用

<input type="text" ng-model="dash.profile" knob class="dial dialIndex">