Question

这是我的第一个角度项目。我已经创建了一个指令。我无法插入从RESTful API提供的对象中获取的值。控制台中显示的对象是这样的，

enter image description here

以下是必要的文件，

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 code sample

< 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">

无法在Angular.js中使用检索到的JSON对象

3 个答案: