admin管理员组

文章数量:1025227

I have this little script and the controller in angular is pletely empty so nothing there.

My question is why can't I run to ngIncludes (By the way no errors)?

<!DOCTYPE html>
<html ng-app="demo">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height    attributes. See  -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<meta name="msapplication-tap-highlight" content="no" />

<script type="text/javascript" src="bower_ponents/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="bower_ponents/angularjs/angular.min.js"></script>
</head>
<body>

<div ng-controller="main">
<ng-include src="'templates/android/header.html'" />
<ng-include src="'templates/android/newsfeed.html'" />
</div>

I have this little script and the controller in angular is pletely empty so nothing there.

My question is why can't I run to ngIncludes (By the way no errors)?

<!DOCTYPE html>
<html ng-app="demo">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height    attributes. See https://issues.apache/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<meta name="msapplication-tap-highlight" content="no" />

<script type="text/javascript" src="bower_ponents/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="bower_ponents/angularjs/angular.min.js"></script>
</head>
<body>

<div ng-controller="main">
<ng-include src="'templates/android/header.html'" />
<ng-include src="'templates/android/newsfeed.html'" />
</div>
Share Improve this question asked Aug 9, 2014 at 9:48 user1645908user1645908 1171 gold badge3 silver badges6 bronze badges 4
  • 1 Can start by removing the single quotes on your "src"'s. – joeltine Commented Aug 9, 2014 at 9:53
  • That would not be a good idea, since that makes sure it is a string in the js parser. – user1645908 Commented Aug 9, 2014 at 9:55
  • Can you reproduce that issue in Fiddle/Planker? – Maxim Shoustin Commented Aug 9, 2014 at 9:57
  • And I would try: <div ng-include="templates/android/header.html'"></div> – Maxim Shoustin Commented Aug 9, 2014 at 9:58
Add a ment  | 

4 Answers 4

Reset to default 3

I had same problem, but in my case I didn't close the div tag properly:

<div ng-include="'partials/agendar.html'">
<div ng-include="'partials/atendimento.html'">

As I saw you do that, but you're using the 'ng-include' as tag. Try like this (worked perfectly for me). Be sure your angular is updated and then use only 'ng-include' (no 'data-'):

<div ng-include="'partials/agendar.html'"></div>
<div ng-include="'partials/atendimento.html'"></div>

Hope it helps.

I prefer valid HTML and suggest you:

<div data-ng-include="'templates/android/header.html'"></div>
<div data-ng-include="'templates/android/newsfeed.html'"></div>

Can you start without src attribute like this:

if you give this type it doesn't show any error messages ngInclude the attribute binding so it doesn't show any error messages.

<data-ng-include="'templates/android/header.html'" />
<data-ng-include="'templates/android/newsfeed.html'" />

The correct way is this:

<div data-ng-include="'templates/android/header.html'"></div>
<div data-ng-include="'templates/android/newsfeed.html'"></div>

Actually the question is not so clear for me but I tried like this and it worked correctly:

 <body ng-controller="MainCtrl">
     <div ng-include src='"file1.html"'></div>
     <div ng-include src='"file2.html"'></div>
  </body>

Demo

I have this little script and the controller in angular is pletely empty so nothing there.

My question is why can't I run to ngIncludes (By the way no errors)?

<!DOCTYPE html>
<html ng-app="demo">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height    attributes. See  -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<meta name="msapplication-tap-highlight" content="no" />

<script type="text/javascript" src="bower_ponents/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="bower_ponents/angularjs/angular.min.js"></script>
</head>
<body>

<div ng-controller="main">
<ng-include src="'templates/android/header.html'" />
<ng-include src="'templates/android/newsfeed.html'" />
</div>

I have this little script and the controller in angular is pletely empty so nothing there.

My question is why can't I run to ngIncludes (By the way no errors)?

<!DOCTYPE html>
<html ng-app="demo">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height    attributes. See https://issues.apache/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<meta name="msapplication-tap-highlight" content="no" />

<script type="text/javascript" src="bower_ponents/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="bower_ponents/angularjs/angular.min.js"></script>
</head>
<body>

<div ng-controller="main">
<ng-include src="'templates/android/header.html'" />
<ng-include src="'templates/android/newsfeed.html'" />
</div>
Share Improve this question asked Aug 9, 2014 at 9:48 user1645908user1645908 1171 gold badge3 silver badges6 bronze badges 4
  • 1 Can start by removing the single quotes on your "src"'s. – joeltine Commented Aug 9, 2014 at 9:53
  • That would not be a good idea, since that makes sure it is a string in the js parser. – user1645908 Commented Aug 9, 2014 at 9:55
  • Can you reproduce that issue in Fiddle/Planker? – Maxim Shoustin Commented Aug 9, 2014 at 9:57
  • And I would try: <div ng-include="templates/android/header.html'"></div> – Maxim Shoustin Commented Aug 9, 2014 at 9:58
Add a ment  | 

4 Answers 4

Reset to default 3

I had same problem, but in my case I didn't close the div tag properly:

<div ng-include="'partials/agendar.html'">
<div ng-include="'partials/atendimento.html'">

As I saw you do that, but you're using the 'ng-include' as tag. Try like this (worked perfectly for me). Be sure your angular is updated and then use only 'ng-include' (no 'data-'):

<div ng-include="'partials/agendar.html'"></div>
<div ng-include="'partials/atendimento.html'"></div>

Hope it helps.

I prefer valid HTML and suggest you:

<div data-ng-include="'templates/android/header.html'"></div>
<div data-ng-include="'templates/android/newsfeed.html'"></div>

Can you start without src attribute like this:

if you give this type it doesn't show any error messages ngInclude the attribute binding so it doesn't show any error messages.

<data-ng-include="'templates/android/header.html'" />
<data-ng-include="'templates/android/newsfeed.html'" />

The correct way is this:

<div data-ng-include="'templates/android/header.html'"></div>
<div data-ng-include="'templates/android/newsfeed.html'"></div>

Actually the question is not so clear for me but I tried like this and it worked correctly:

 <body ng-controller="MainCtrl">
     <div ng-include src='"file1.html"'></div>
     <div ng-include src='"file2.html"'></div>
  </body>

Demo

本文标签: javascriptUsing ngInclude multiple times in AngularjsStack Overflow