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

Question

我是 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>

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

提前致谢。

Answer 1

我添加了一个plunkr where based on the key, response the value based on your question hope hope help.

基本上我添加了一个属性源，因为 $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];
    }
  }
});

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

Display json data using angularJS custom directive

angularjs

angularjs-directive

angularjs-scope

angularjs-ng-repeat

实际响应

JSON 响应数据

我的脚本文件

HTML