首页 文章

使用angularJS自定义指令显示json数据

提问于
浏览 次
1

我是angularJS的新手，并使用angularJS指令创建一个用于显示json数据的示例，如下所述：

<div ng-controller="myController">
       <div my-attribute="String1">Hello</div>
       <div my-attribute="String2">Welcome</div>
       <div my-attribute="String3">AngularJS</div>
       <div my-attribute="String4">AngularJS test</div>
       <div my-attribute="String5">AngularJS test 123</div>
 </div>

实际响应

该指令显示所有属性的最后响应json数据 .

<div ng-controller="myController" class="ng-scope">
  <!-- ngRepeat: (key, resourceString) in resourceStrings --><ul ng-repeat="(key, resourceString) in resourceStrings" class="ng-scope">
    <div my-attribute="String1" class="ng-binding ng-isolate-scope">AngularJS test 123</div>
  </ul><!-- end ngRepeat: (key, resourceString) in resourceStrings --><ul ng-repeat="(key, resourceString) in resourceStrings" class="ng-scope">
    <div my-attribute="String2" class="ng-binding ng-isolate-scope">AngularJS test 123</div>
  </ul><!-- end ngRepeat: (key, resourceString) in resourceStrings --><ul ng-repeat="(key, resourceString) in resourceStrings" class="ng-scope">
    <div my-attribute="String3" class="ng-binding ng-isolate-scope">AngularJS test 123</div>
  </ul><!-- end ngRepeat: (key, resourceString) in resourceStrings --><ul ng-repeat="(key, resourceString) in resourceStrings" class="ng-scope">
    <div my-attribute="String4" class="ng-binding ng-isolate-scope">AngularJS test 123</div>
  </ul><!-- end ngRepeat: (key, resourceString) in resourceStrings --><ul ng-repeat="(key, resourceString) in resourceStrings" class="ng-scope">
    <div my-attribute="String5" class="ng-binding ng-isolate-scope">AngularJS test 123</div>
  </ul><!-- end ngRepeat: (key, resourceString) in resourceStrings -->
</div>

JSON响应数据

{“String1”：“Hello”，“String2”：“Welcome”，“String3”：“AngularJS”，“String4”：“AngularJS test”，“String5”：“AngularJS test 123”}

我的脚本文件

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

app.factory('resourceStrings', function($http) {
var promise = null;

  return function() {
    if (promise) {
      return promise;
    } else {
      promise = $http.get('resource.json');
  return promise;
}

}; }）;

app.controller('myController', function($scope, resourceStrings) {
  resourceStrings().success(function(data) {
  $scope.resourceStrings = data;

}）; }）;

app.directive('myAttribute', function() {
  return {
restrict: 'A',
replace: true,
template: '<div>{{displayValue}}</div>',
scope: {
  myAttribute: '=resourceString'
},
controller  : 'myController',
link: function(scope, element, attrs) {
  scope.$watch('resourceStrings', function(resourceStrings) {
    angular.forEach(resourceStrings, function(resourceString, key) {
        scope.displayValue = resourceString;
    });
  });
}

}; }）;

HTML

<div ng-controller="myController">
  <ul ng-repeat="(key, resourceString) in resourceStrings">
    <li my-attribute={{key}}></li>
  </ul>
</div>

请告诉我显示相同数据的问题是什么？如何按预期显示数据？

提前致谢 .

angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

1 回答

  • 0

    我添加了一个基于密钥的plunkr，根据您的问题描述希望帮助回复该值 .

    基本上我添加了一个属性源，因为$ watch无法识别数据源，请参阅示例并告诉我它是否对您有所帮助 . example - plunkr

    angular.module('myApp', []);
angular.module('myApp').controller('myController', ['$scope',
'resourceStrings',
function($scope, resourceStrings) {
   var vm = this;

   vm.example = 'blabla';
   resourceStrings().then(function(value) {
      vm.resourceStrings = value.data;
   });

 }
]);

angular.module('myApp').factory('resourceStrings', function($http) {
  var promise = null;

  return function() {
    if (promise) {
      return promise;
    } else {
      promise = $http.get('resource.json');
      return promise;
    }
  }
});

angular.module('myApp').directive('myAttribute', function() {
  return {
    restrict: 'A',
    template: '<div>{{displayValue}}</div>',
    scope: {
      myAttribute: '=',
      source: '='
    },
    link: function(scope, element, attrs) {
      scope.displayValue = scope.source[scope.myAttribute];
    }
  }
});
    回复于

相关问题