Question

我正在构建一个单页应用。这需要用户登录。成功验证后，内容应加载到与登录表单相同的指令中。

在我的控制器中，我有一个模型“activePage”，其中包含需要加载的模板的URL。

我的指示是主页中的“我的页面”。每当我的模型“activePage”（即url）发生变化时，我都希望“my-Page”指令动态加载模板。

我不想为此使用路由，因为更改模型“activePage”涉及应用程序登录。

angular.module("app",[])
       .controller("main",mainController)
       .directive("myPage",pageDirective);

function mainController()
{
  $scope.url="login.html";
  $scope.submit= submit;
  function submit()
  {
    //authentication stuff goes here and on success the following is set
    $scope.url="home.html";
    //if new user then the url is set to a register page on demand
  }
}

function pageDirective()
{
  return {
      restrict:"E",
      scope: {url:"="},
      templateUrl:scope.url
  };
}

<!--index.html-->

<html ng-app="app">
  <head>
    <script src="app.js"></script>
    <script src="angular.min.js"></script>
    </head>
  <body ng-controller="main">
    <my-page url="url"></my-page>
    </body>
</html>

<!--login.html-->
  <div><form ng-submit="submit()">
    <input type="email" ng-model="email">
    <input type="password" ng-model="password">
    </form>
    </div>

<!--home.html-->
<div>
  <!-- user dasboard is here-->
  </div>

即时将DOM加载到指令中

0 个答案: