我正在尝试使用模板元素和 Angular。
<template id="loginTemplate">
<div id="login" class="menuTop menu top" data-ng-controller="loginCtrl">
<form class="form-inline text-center" id="loginForm" data-ng-submit="login()">
<input type="email" class="input-big" placeholder="Email" data-ng-model="loginEmail">
<input type="password" class="input-mini" placeholder="Password" data-ng-model="loginPass">
<input type="text" class="input-small" placeholder="Display name" data-ng-model="loginName" data-ng-show="register">
<button type="submit" class="btn-small">Sign in</button>
<button type="button" class="btn-small" data-ng-hide="register" data-ng-click="register=true">Register</button>
</form>
</div>
</template>
JS:
(function init(){
"use strict";
var loginTemplate = document.querySelector("#loginTemplate").content;
document.body.appendChild(loginTemplate.cloneNode(true));
return;
})();
这非常适合在 init 上渲染我的 Angular 控制器数据。但是,当我想有条件地加载下一个模板时,它不起作用。
<template id="menuTemplate">
<div id="menu" class="menuTop menu top" data-ng-controller="menuCtrl">
{{ time.now }}
</div>
</template>
JS:
socket.on("logon", function ( data ){
//this fails
$scope.user.name = data.userName;
var menuTemplate = document.querySelector("#menuTemplate").content;
document.body.removeChild(document.getElementById("login"));
document.body.appendChild(menuTemplate.cloneNode(true));
}
这将显示 {{ variables }}。首先加载此 menuTemplate 使其工作,但有条件地加载它不会。也许 Angular 不支持模板元素,因为他们说支持将在 2.0 中提供,但初始加载工作,所以也许有人在其他地方工作?也许 .clonenode 在加载后执行时会破坏角度链接?我不知道。
编辑:有一个小提琴,但无法像在 chrome canary 中那样工作。 http://jsfiddle.net/CSK8n/