AngularJs - 使用ng-controller和ng-include

时间:2016-05-10 02:00:30

标签: javascript angularjs angularjs-ng-include ng-controller

这有效:

// Parse ISO format string as local, ignore timezone
// E.g. 2016-05-29T23:32:15
function parseISOLocal(s) {
  // Split string into its parts
  var b = s.split(/\D/);
  // Create and return a date object
  return new Date(b[0], b[1]-1, b[2], b[3], b[4], b[5]);
}

// Convert a millisecond value to days, hours, minutes and seconds
function formatDHMS(ms) {
  // Helper to add 's' to a number if other than 1
  function addS(n){return n == 1? '' : 's';}
   
  // Get the whole values of each unit, rounded down ( |0 truncates)
  var d =  ms/8.64e7 | 0;          // days
  var h = (ms%8.64e7) / 3.6e6 | 0; // hours
  var m = (ms%3.6e6)  / 6e4 | 0;   // minutes
  var s = (ms%6e4)    / 1e3 | 0;   // seconds

  // Return a formatted string
  return d + ' day' + addS(d) + ', ' + 
         h + ' hour' + addS(h) + ', ' + 
         m + ' minute' + addS(m) + ' and ' +
         s + ' second' + addS(s);
}

document.write(formatDHMS(parseISOLocal('2016-05-04T09:00:00') - parseISOLocal('2016-05-03T08:00:00')))

然而,这并不是(<div ng-include="'login.html'" flex ng-if="!loggedIn" ng-controller="LoginController"></div> 没有输出):

{{test}}

有什么理由吗?或者这是一个错误?

的login.html:

<ng-include src="'login.html'" flex ng-if="!loggedIn" ng-controller="LoginController"></ng-include>

的LoginController:

<p>{{test}}</p>

2 个答案:

答案 0 :(得分:1)

我不确定定义“loggedIn”的位置,但是当我在父控制器上定义它时,两种语法都按预期工作。

Plunkr

<div ng-controller="PrntCtrl">
      <div ng-include="'test.html'" flex ng-if="!loggedIn" ng-controller="TestCtrl"></div>
      <ng-include src="'test.html'" flex ng-if="!loggedIn" ng-controller="TestCtrl"></ng-include>
    </div>

需要考虑的一些问题: 你使用什么版本的角度? 您的应用是如何定义的以及控制器如何在应用中注册? “loggedIn”在哪里定义?

答案 1 :(得分:0)

因为该指令只接受3个参数:

  • ngInclude | src = string
  • onload(可选)= string
  • autoscroll(可选)= string

...根据ngInclude Docs

编辑:

你可以解决它只是将它包装在另一个元素中......

<div ng-if="!loggedIn" ng-controller="LoginController">
  <div ng-include="'login.html'" flex></div>
</div>