Templates 在AngularJS中重新编译指令模板

我试图通过提供一个带有

login

和

logout

方法的服务

auth

和一个

loggedIn

属性（一旦我让它工作起来，它实际上就是用户对象，但为了简单起见，现在它只是一个布尔值）和一个

login

指令，向我的应用程序添加身份验证功能，它根据

loggedIn

变量的值显示内联登录表单或注销按钮

简单身份验证实现：

app.factory 'auth', ($log) ->
  {
    loggedIn: false
    login: (username, password) ->
      $log.log "Login: #{username}, #{password}"
      if username is "a" and password is "b"
        @loggedIn = true
    logout: ->
      @loggedIn = false
  }

（很明显，一旦我实现了这个功能，登录将通过REST完成！这只是为了方便起见，所有应用程序逻辑都驻留在服务器上，服务器使用传统会话）

我的指令有问题。我知道我可以使用

template

或

templateUrl

静态选择模板，但如何用新的

$compile

d模板替换当前模板

app.directive "login", ($compile) ->
    restrict: "E"
    templateUrl: "/login.html"
    scope: { }
    controller: ($scope, $element, $log, auth) ->
      $scope.auth = auth
      $scope.$watch 'auth.loggedIn', (newVal, oldVal) ->
        $log.log "Done: #{newVal} <- #{oldVal}"
        # here I should switch to the other template if newVal != oldVal

app.directive“login”（$compile）->
限制：“E”
templateUrl:“/login.html”
作用域：{}
控制器：（$scope，$element，$log，auth）->
$scope.auth=auth
$scope.$watch'auth.loggedIn'，（newVal，oldVal）->
$log.log“完成：#{newVal}我是通过以下示例来实现的：。使用$element替换元素，然后在新子树上调用$compile。但是，我不知道在将旧节点替换为新节点时，是否需要采取任何额外的预防措施，因为绑定/监视程序在旧节点上仍然有效。此外，虽然这里的DOM操作逻辑这是最小的，从技术上讲，我仍然在操作DOM:-）你知道replace:true属性吗？这似乎没有关系。它只是在将编译后的模板附加到DOM时删除
login
节点。这与编译新字符串如何受影响无关，而且似乎你不能将其传递给$compile，而只能作为指令定义选项。用同样的东西来扭动。我认为答案是一个链接函数，它可以访问范围，然后可以监视变量中的变化。检查这个答案，然后调整。