Question

这是我的文件夹结构

项目
- ＆GT;使用Javascript - ＆GT;教室 - ＆GT;教室 - ＆GT; classdetail - ＆GT;控制器 - ＆GT; classcontrol.js
指令 - ＆gt; classdetailDirective.js（指令和控制器处于同一级别，即在classdetail文件之后）

- ＆GT;语言 - ＆GT;教室 - ＆GT; classroomdata.json

- ＆GT;模板 - ＆GT;教室 - ＆GT;教室 - ＆GT; classdetail - ＆GT; classdetail.html
指令 - classdetailDirective.html（classdetail文件夹打开classdetail.html和directives文件夹，后者又可以访问classdetailDirective.html）

json文件包含数据{“classSize”：“60”}

这是classdetailDirective.js文件的样子

app.directive('classDetail', function(){  
return{  
restrict : 'E',  
scope : {isPresent: '='  
},  
templateUrl : 'templates/classroom/classroom/classdetail/directives/classdetailDirective.html'  
}  
});

控制器此刻没有做任何事情。任何形式的修改都可以。

在classdetailDirective.html中，我想以工具提示的形式显示classSize信息。

<div title="{{classSize}}"></div>

我尝试使用$ http.get，但它没有用。我不知道如何完成这项工作。请帮忙。我再次为我写这个问题的方式道歉。这是第一次。

Answer 1

嗨，鉴于您的项目结构，如果您在项目中使用webpack，或者其他解决方案是将json放在导出函数中，我建议包含json-loader，更改：

/languages/classroom/classroomdata.json

到

/languages/classroom/classroomdata.js

<强> classroomdata.js

// Create the DefaultListModel object
// Add the JList
model = new DefaultListModel<Set<String>>();
model.addElement(book.AB.keySet());
contactList = new JList<Set<String>>(model);

然后在你的指令顶部do（路径可能不准确，所以尝试解决）：

export default ()=> {
  // return your json here
  return {"classSize" : "60"}; 
}

现在只需在具有json

的指令中使用classroomData变量

Answer 2

尝试使用http方法获取数据，例如：

app.directive('classDetail', function($scope, $http) {
  $http.get("relative-path-to-your-json-file")
       .then(function (response) {$scope.data = response.data;});
});

Answer 3

根据您对如何使用$ http.get

的评论

你应该能够根据你正在使用它的代码使用response.data来获取json中的数据

response.classSize

试试这个

 $http.get("languages/classroom/classroom.json").then(functio‌n(response){ 
 $scope.showToolTip = response.data.classSize; 
 )};

如何将文件中的JSON数据转换为角度指令

3 个答案: