Question

我正在尝试使用模板元素和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在加载后执行时会破坏角度链接？我不知道。

编辑：有一个小提琴，但一直无法使其像铬金丝雀一样工作。 http://jsfiddle.net/CSK8n/

html5模板元素AngularJS

0 个答案: