Angularjsディレクティブコンパイル -- angularjs フィールド と angularjs-directive フィールド 関連 問題

Angularjs directive compile












0
vote

問題

日本語

My Directiveは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>
英語

My directive is not inserting html correctly. I think I need to compile the html before inserting it but I'm not exactly sure how to do this. My template works fine the first time, but when it is replaced the ng-click() event is not registering and the html responds as a normal anchor tag.

There's probably a cleaner way of writing this as well if someone could help with best practices that would be appreciated. I'm just using the openSigninDialog() event on the replaced signout text for testing purposes obviously.

Directive

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>");       });     }   } }); 

Controller

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> 
</div
     

回答リスト

0
 
vote
vote
ベストアンサー
 

私はこの間違ったことに行きました。私はNG-ShowとNG-HIDEディレクティブに組み込まれているAngularJSを使用して終わりました。

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; }; });
 

I was going about this wrong. I ended up using angularjs' built in ng-show and ng-hide directives.

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; };  }); 
</div
 
 

関連する質問

0  角カスタムディレクティブで未定義の値  ( Value undefined in angular custom directive ) 
ユーザーがそれを見る権限がない場合、DOM要素を破棄するための指令をしようとしました。私は次のようにこれをします: <事前> <コード> angular .module('digital_equation.auth') .con...

4  ファクトリサービスで定義されているNG-Clickで関数を呼び出す方法  ( How to call function in ng click which is defined in factory service ) 
ファクトリサービス内で定義されているNG-Clickでは、NG-Clickで関数を呼び出す方法、 <事前> <コード> app.factory('MyFactory', [function () { return { setTest: ...

0  私のコントローラーは大丈夫ですが指令はありません  ( My controller is working fine but directive is not ) 
OK、これは私のAngularJSコントローラも指令を持っています。 これでアプリケーションを実行すると、このコントローラのデザインが機能していますが、ディレクティブとして再使用しようとしたときに、新しいHTMLページは空です。 AngularJSコントロ...

6  DartのWebコンポーネント対Angularのディレクティブ  ( Darts web component vs angulars directive ) 
DARTのWebコンポーネントと Angular's Directionives 彼らは非常に同様の目的に役立つように見えます。重要な違いはありますか? ...

4  GoogleマップのAngularyJSディレクティブで地図を再作成する  ( Re create the map by angularjs directive of google map ) 
AngularJSの正方形のテーマを使用しており、マップ指令を使用してこのような地図を生成します。 <事前> <コード> <map class="ui-map" zoom="7" center="[32.794065, -97.439365]" style=...

1  AngularJSでのレンダリングが完了した後にディレクティブを実行する方法  ( How to run a directive after the dom finished rendering in angularjs ) 
テンプレートを動的にレンダリングしようとする{{タグ}}の後にディレクティブを実行する方法は終了しましたか? ディレクティブ: <事前> <コード> angular.module('services', []) .directive('demo', f...

-3  動的カルーセルアンギュラ  ( Dynamic carousel angular ) 
バックエンドからアレイを取得しています、そして私はそれを角度を使ってカルーセルとして表示したいです。 コンポーネントは応答する必要があります。 すべてのスライドに複数の項目が含まれます。 これを実装できる方法についての考えは? ありがとう ...

3  NG-Repeat内の項目値をチェックするためにNGを無効にする方法(AngularJSを使用)  ( How to get ng disabled to check for an item value inside in a ng repeat using a ) 
angularjs ng-repeat ディレクティブの中に<コード> ng-disabled の作業に問題がある。下記のコードをご覧ください。誰かが私がどこへ行かれているのか教えてもらえますか?あなたの助けをありがとう! 注:これは単なるデモアプリである...

3  制限値:AE angular2のAE  ( Equivalent of restrict ae in angular2 ) 
角度1では、 restrict を使用して、指示型の使用方法を決定できます。例えば: <事前> <コード> angular.module('foo').directive('fooDirective', [function () { return { ...

29  AngularJS - ディレクティブのリンク機能の絶縁範囲へのアクセス  ( Angularjs access isolated scope in directives link function ) 
AngularyJSカスタムディレクティブで最初の試みを出しています。 ディレクティブのリンク機能の孤立した範囲を使用している(または理解する)問題があります。 これは私のアプリのこの部分のコードです: View.html <事前> <コード> ... ...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有