0

私のディレクティブは html を正しく挿入していません。挿入する前にhtmlをコンパイルする必要があると思いますが、これを行う方法が正確にはわかりません。私のテンプレートは初めて正常に動作しますが、置き換えられると ng-click() イベントが登録されず、html は通常のアンカー タグとして応答します。

誰かがベストプラクティスを手伝ってくれれば、これをもっときれいに書く方法もあるでしょう。明らかにテスト目的で、置き換えられたサインアウト テキストで openSigninDialog() イベントを使用しているだけです。

指令

app.directive('navbarright', function() {
  return {
    restrict: "A",
    template: "<li><a href='#'>New</a></li>"+
          "<li><a href='' ng-click='openSigninDialog()'>Sign In</a></li>",
    link: function (scope, elem, attrs) {
      scope.$on('event:auth-signinConfirmed', function() {
      elem.html("<li><a href='#'>New</a></li>"+
        "<li><a href='' ng-click='openSigninDialog()'>Sign Out</a></li>");
      });
    }
  }
});

コントローラ

app.controller('NavbarRightCtrl', function($scope) {
  console.log('signin event occuring');
  $rootScope.$broadcast('event:auth-signinConfirmed');
});

HTML

    <ul class="nav pull-right" ng-controller="NavbarRightCtrl" navbarright>  
    </ul>
4

1 に答える 1

0

私はこれについて間違っていました。angularjs のビルトイン ng-show および ng-hide ディレクティブを使用することになりました。

HTML

    <ul class="nav pull-right" ng-controller="NavbarRightCtrl">  
      <li><a href="#">New</a></li>
      <li ng-hide="signedIn"><a href="" ng-click="signin()" ng-init="load()">Sign In</a></li>
      <li ng-show="signedIn">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Bob <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="" ng-click="signout()">Sign Out</a></li>
        </ul>
      </li>
    </ul>

Javascript

app.controller('NavbarRightCtrl', function($scope, $rootScope) {

$scope.signin = function(){
  console.log('signin event');
  $rootScope.signedIn = true;
});

$scope.signout = function () {
  console.log('signing out');
  $rootScope.signedIn = false;
};

$scope.load = function () {
  $rootScope.signedIn = false;
};

});
于 2013-03-19T08:09:00.333 に答える