AngularJs在尝试在指令中访问数据时崩溃。

huangapple
go评论138阅读模式
英文:

AngularJs crashes when trying to access data in directive

问题

所以我是Angular的新手，正在尝试创建一个应用程序。我的服务器非常基础，使用Go语言编写。这是我的Angular代码：

  1. (function() {
  2. 	var app = angular.module('dashboard', []);
  3. 	app.controller("JobsController", function() {
  4. 		this.currentJob = 0;
  5. 		this.jobs = jobs;
  6. 		this.setCurrentJob = function(index) {
  7. 			this.currentJob = index; 
  8. 		};		
  9. 	});
  11. 	var jobs = [
  12. 		{
  13. 			'id': 1,
  14. 			'requester': 'Prakash Sanker',
  15. 			'description': '我想让你给我整个世界'
  16. 		},
  17. 		{
  18. 			'id': 2,
  19. 			'requester': 'MJ Watson',
  20. 			'description': '请给我蜘蛛侠，最好是倒挂着...但我不挑剔'
  21. 		},
  22. 		{
  23. 			'id': 3,
  24. 			'requester': 'Josh Lyman',
  25. 			'description': 'Matthew Santos当总统...或者Jed Bartlet...但请不要是共和党人'
  26. 		}, 
  27. 		{
  28. 			'id': 4,
  29. 			'requester': 'Barry Allen',
  30. 			'description': '一套无摩擦的服装，当我以每小时数千英里的速度奔跑时不会起火...这是给一个朋友的'
  31. 		},
  32. 		{
  33. 			'id': 5,
  34. 			'requeter': 'A. Bambaata',
  35. 			'description': '80年代的音乐播放器，状态良好。如果必要，可以倒回到过去'
  36. 		}
  37. 	];
  39. })();
  41. 这是我的index.html：
  43. ```html
  44. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  45. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  46. <script type="text/javascript" src="/dashboard.js"></script>
  47. <body>
  48. 	<div class="dashboard">
  49. 		<div ng-controller="JobsController as jobsCtrl">
  50. 			<div class="jobs">
  51. 				{{jobsCtrl.jobs[0]}}
  52. 			</div>
  53. 		</div>
  54. 	</div>
  55. </body>
  57. 这导致我的服务器出现以下错误：
  59. 2015/07/29 12:18:02 http: panic serving [::1]:56857: runtime error: invalid memory address or nil pointer dereference
  60. goroutine 18 [running]:
  61. net/http.func·009()
  62. 	/usr/local/go/src/pkg/net/http/server.go:1093 +0x9e
  63. runtime.panic(0x20ed40, 0x4efaed)
  64. 	/usr/local/go/src/pkg/runtime/panic.c:248 +0xda
  65. html/template.(*Template).escape(0x0, 0x0, 0x0)
  66. 	/usr/local/go/src/pkg/html/template/template.go:52 +0x30
  68. 为什么会发生这种情况？
  70. <details>
  71. <summary>英文:</summary>
  73. So I&#39;m new to Angular and trying to do an app. My server is very basic and written in go. This is my angular code-
  75.     (function() {
  76.     	var app = angular.module(&#39;dashboard&#39;, []);
  77.     	app.controller(&quot;JobsController&quot;, function() {
  78.     		this.currentJob = 0;
  79.     		this.jobs = jobs;
  80.     		this.setCurrentJob = function(index) {
  81.     			this.currentJob = index; 
  82.     		};		
  83.     	});
  84.     
  85.     	var jobs = [
  86.     		{
  87.     			&#39;id&#39;: 1,
  88.     			&#39;requester&#39;: &#39;Prakash Sanker&#39;,
  89.     			&#39;description&#39;: &#39;I want you to give me the entire world&#39;
  90.     		},
  91.     		{
  92.     			&#39;id&#39;: 2,
  93.     			&#39;requester&#39;: &#39;MJ Watson&#39;,
  94.     			&#39;description&#39;: &#39;Please give me Spiderman, preferably upside down...but Im not fussy&#39;
  95.     		},
  96.     		{	&#39;id&#39;: 3,
  97.     			&#39;requester&#39;: &#39;Josh Lyman&#39;,
  98.     			&#39;description&#39;: &#39;Matthew Santos as president...or Jed Bartlet..but please not anyone Republican&#39;
  99.     		}, 
  100.     		{
  101.     			&#39;id&#39;: 4,
  102.     			&#39;requester&#39;: &#39;Barry Allen&#39;,
  103.     			&#39;description&#39;: &#39;A frictionless suit that wont burst into flames when I run at a zillion miles an hour...its for a friend&#39;
  104.     		},
  105.     		{
  106.     			&#39;id&#39;: 5,
  107.     			&#39;requeter&#39;: &#39;A. Bambaata&#39;,
  108.     			&#39;description&#39;: &#39;Boombox, prime condition, from the 80s. Go back in time if you have to&#39;
  109.     		}
  110.     	];
  111.     
  112.     })();
  114. This is my index.html - 
  116.     &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js&quot;&gt;&lt;/script&gt;
  117.     &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js&quot;&gt;&lt;/script&gt;
  118.     &lt;script type=&quot;text/javascript&quot; src=&quot;/dashboard.js&quot;&gt;&lt;/script&gt;
  119.     &lt;body&gt;
  120.     	&lt;div class=&quot;dashboard&quot;&gt;
  121.     		&lt;div ng-controller=&quot;JobsController as jobsCtrl&quot;&gt;
  122.     			&lt;div class=&quot;jobs&quot;&gt;
  123.     				{{jobsCtrl.jobs[0]}}
  124.     			&lt;/div&gt;
  125.     		&lt;/div&gt;
  126.     	&lt;/div&gt;
  127.     &lt;/body&gt;
  129. This causes this error on my server 
  131.     2015/07/29 12:18:02 http: panic serving [::1]:56857: runtime error: invalid memory address or nil pointer dereference
  132.     goroutine 18 [running]:
  133.     net/http.func&#183;009()
  134.     	/usr/local/go/src/pkg/net/http/server.go:1093 +0x9e
  135.     runtime.panic(0x20ed40, 0x4efaed)
  136.     	/usr/local/go/src/pkg/runtime/panic.c:248 +0xda
  137.     html/template.(*Template).escape(0x0, 0x0, 0x0)
  138.     	/usr/local/go/src/pkg/html/template/template.go:52 +0x30
  140. Why is this happening? 
  142. </details>
  145. # 答案1
  146. **得分**: 0
  148. 你不能在Go模板中使用Angular的默认开始`{{`和结束`}}`括号，因为Go服务器会将你的Angular代码解释为[Go模板参数和管道](http://golang.org/pkg/text/template/)。
  150. 为了解决这个问题，你可以在配置中使用Angular的$interpolate来更改定义Angular代码的分隔符：
  152. ```javascript
  153. var app = angular.module('dashboard', []);
  155. app.config(function($interpolateProvider) {
  156.     $interpolateProvider.startSymbol('[{');
  157.     $interpolateProvider.endSymbol('}]');
  158. });

或者，如果你的页面是静态的，你可以直接使用Go内置的文件服务器，以避免与模板产生混淆：

http://golang.org/pkg/net/http/#example_FileServer

英文:

You cannot use angular's default start {{ and end }} brackets in a go template because the go server interprets your angular as go template arguments and pipelines.

> "Arguments" and "pipelines" are evaluations of data

To solve this you can make use of angular's $interpolate in your config to change the delimiters that define angular code:

  1. var app = angular.module(&#39;dashboard&#39;, []);
  2. app.config(function($interpolateProvider) {
  3. $interpolateProvider.startSymbol(&#39;[{&#39;);
  4. $interpolateProvider.endSymbol(&#39;}]&#39;);
  5. });

Alternatively if your pages are static you can just use Go's built in file server to not cause confusion with templates:

http://golang.org/pkg/net/http/#example_FileServer

huangapple
  • 本文由 发表于 2015年7月30日 03:32:55
  • 转载请务必保留本文链接：https://go.coder-hub.com/31709533.html
  • angularjs
  • go
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定