AngularJs指令 - <script>內模板

我有一個指令，一個模板，這個模板裏面我有使用該指令的變量<script>標籤。AngularJs指令 - <script>內模板

指令：

(function() { 
     'use strict'; 

     angular 
     .module('app.components') 
     .directive('picker', Picker); 

     /*@ngInject*/ 
     function Picker() { 

     return { 
      restrict: 'E', 
      controller: PickerController, 
      controllerAs: 'vm', 
      bindToController: true, 
      templateUrl: 'picker.html', 
      transclude: true, 
      scope:{ 
      inputId: '@' 
      } 
     }; 

     /*@ngInject*/ 
     function PickerController() { 
      /*jshint validthis: true */ 
      var vm = this; 
     } 

     } 
    })();

模板：

<div> 
     <div> 
     id: {{vm.inputId}} 
     <ng-transclude></ng-transclude> 
     </div> 
     <script> 
     console.log({{vm.inputId}}); 
     </script> 
    </div>

用法：

<picker input-id="myInput"> <!-- something... --> </picker>

的問題是，{{vm.inputId}}內<script>標籤不已過濾，因此{{vm.inputId}}不會變成「myInput」。一切工作<script>標籤之外，id: {{vm.inputId}}變成id: myInput

難道只是不可能把「變量」放在腳本標籤內嗎？

來源

2015-07-13 Lusk116

爲什麼你需要一個腳本標記呢？只需使用你的控制器。 – Cerbrus

請顯示scipt標記代碼 –

這個想法是在指令中包裝一個jQuery datepicker，但保持指令或多或少與指向包裹的datepicker耦合。我把日期選擇器，按鈕等放到模板中，所以我只需要更改模板，如果我想使用另一個日期選擇器庫但如果我想在一個頁面內多次使用此指令，我必須更改Ids動態和Ids也在腳本標記 – Lusk116

好，jQlite不支持模板腳本標記。 jQuery的確如此，所以如果你需要這個功能的話，推薦使用jQuery。

此外，

即使你使用<script>標籤在你的模板內的代碼會被執行外角的範圍內。所以，你將不能訪問內部控制的範圍內的任何變量在<script>標籤模板文件中。這基本上意味着，做這樣的事情

<script> 
    console.log({{vm.inputId}}); 
    </script>

是不可能的，因爲neighter VM，也不inputId會提供你會INFACT得到一個錯誤，聲稱Unexpected token {{

同樣，你可以寫在同一代碼無論如何。所以，如果您還打算使用<script>你的模板中爲什麼事情

複雜的是，這裏有一個plunkr

來源

2015-07-13 12:12:42 nalinc

'內的代碼將在角度的上下文執行這回答我的問題:) 我儘量把所有東西放入控制器，如果可能 – Lusk116

很高興它幫助:) – nalinc

我不建議使用<script>標籤模板內的。

如果你想在視圖被加載，那麼你可以使用ngInit指令，而不是瞬間記錄inputId的價值。

<div ng-init="log(vm.inputId)"> 
    id: {{vm.inputId}} 
    <ng-transclude></ng-transclude> 
</div>

，並添加日誌功能到你的範圍控制器：

app.controller('myController', function($scope, $log) { 
    $scope.log = function (message) { 
     $log.log(message) 
    }; 
});

來源

2015-07-13 12:41:15

我不知道我不想記錄vm.inputId的值，console.log（..）只是一個例子。我計劃了一些像$（'＃'+ vm.inputId）.....將所有內容放入控制器中它:) – Lusk116

的一段代碼，在

<script> 
     console.log({{vm.inputId}}); 
</script>

實現可以將指令的控制器內得到很好的實施。這將允許您以訪問您的變量的豪華運行JavaScript代碼。

例如，你可以有這樣的：

var app = angular.module('myApp', []) 

app.directive('testDirective', function(){ 
    return { 
    restrict: 'E', 
    template: '<p>Click in the text box</p>'+ 
       '<textarea id="my-area"></textarea>'+ 
       '<p>Click {{num_clicks}}</p>', 
    controller: function($scope, $log){ 
     $scope.num_clicks = 0; 
     $("#my-area").click(function(){ 
     incr(); 
     }); 
     function incr(){ 
     $scope.num_clicks = $scope.num_clicks + 1; 
     $scope.$digest(); 
     $log.log("A click", $scope.num_clicks); 
     } 

    } 
    }; 
});

我希望這有助於

來源

2016-05-09 18:44:43 Patrick

只包括與腳本對索引中的剩餘部分（角等）的庫腳本。

您仍然可以將日期選擇器包裝在指令中 - 使用指令的link函數。如果jQuery在您的項目中，您將有權訪問鏈接函數的「element」參數上的所有jquery函數。

angular.module('myModule').directive('datepicker', function() { 
    return { 
    link: function (scope, elem, attrs) { 
     elem.jqdatepicker({ /* options */ }); 
    } 
    }; 
});

來源

2016-05-09 18:49:58

AngularJs指令 - <script>內模板

回答

相關問題