0

我正在尝试使用模板元素和 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/

4

0 回答 0