2

我正在尝试通过提供auth带有方法和login属性的服务（一旦我让它工作，这实际上将是用户对象，但现在它只是一个简单的布尔值）和一个指令，来为我的应用程序添加身份验证功能，它显示内联登录表单或注销按钮，具体取决于变量的值。logoutloggedInloginloggedIn

简单的身份验证实现：

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呢？

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

我知道我可能可以获得模板的根元素，删除旧节点并添加新节点，但我希望有一种更“声明性”的方式来以角度执行此操作，而无需执行任何 DOM 操作。

4

0 回答 0