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响应数据

{ ＆＃34; String1＆＃34;：＆＃34; Hello＆＃34;，＆＃34; String2＆＃34;：＆＃34;欢迎＆＃34;，＆＃34; String3＆＃34;：＆＃34; AngularJS＆＃34;，＆＃34; String4＆＃34;：＆＃34; AngularJS test＆＃34;，＆＃34; String5＆＃34;：＆＃34; AngularJS test 123＆＃34; }

我的脚本文件

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，根据您的问题描述希望帮助回复该值。

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

实际响应

JSON响应数据

我的脚本文件

HTML

1 个答案: