如何在角度中自定義指令？

Question

我想在角度自定義指令。我嘗試在我的視圖中添加輸入字段，當我點擊按鈕。換句話說，我正在試圖做一個自定義指令，其中當用戶按下按鈕時，它添加一個輸入字段在瀏覽器中。如果我不使用自定義指令，我認爲它太容易了。意思是，如果我只使用控制器，那麼當用戶單擊按鈕並在控制器上存在按鈕單擊時，我將一個數組和一個數組按下。

但需要時進行自定義指令，我會寫我的按鈕單擊事件中的控制器或指令

這裏是我的代碼 http://play.ionic.io/app/23ec466dac1d

angular.module('app', ['ionic']).controller('appcontrl',function($scope){ 

    $scope.data=[] 
}).directive('inputbutton',function(){ 
    return { 

    restrict :'E', 
    scope:{ 
     data:'=' 
    }, 
    template:'<button>Add input</button> <div ng-repeat="d in data"><input type="text"></div>', 
    link:function(s,e,a){ 
     e.bind('click',function(){ 
     s.data.push({}) 
     }) 

    } 

    } 

}) 

我只需要添加輸入字段，當用戶點擊在按鈕上使用自定義指令..你能告訴我我在哪裏做錯了嗎？

我們可以讓按鈕模板，然後單擊該指令

Answer 1

它不工作的原因，是因爲您註冊您的點擊使用jQuery處理程序。因此，當點擊處理程序觸發時，它不在角度範圍內，所以角度不知道它需要更新其綁定。

所以你有兩個選擇，第一個是告訴角度在點擊處理，'喲夥伴，更新你的綁定'。這是使用$scope.$apply

$申請文檔進行：https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope＃$適用

 e.bind('click',function(){ 
      s.$apply(function() { 
       s.data.push({}); 
      }); 
     }); 

但是角度已經具有內置的指令處理之類的鼠標點擊就可以直接使用，讓角做爲你工作。這將是更好的選擇。

所以先在你看來你的按鈕註冊一個單擊處理

<button ng-click="add()">Add input</button> <div ng-repeat="d in data"><input type="text"></div> 

然後在你的鏈接只需添加你的範圍

 s.add = function() { 
      s.data.push({}); 
     } 

繼承人顯示這兩個例子中工作小提琴的add()方法。 http://jsfiddle.net/3dgdrvkq/

---

編輯：在您的一次點擊處理程序還注意到一個輕微的錯誤。您註冊點擊但不指定要應用它的按鈕。所以如果你點擊指令中的任何地方，不僅僅是按鈕，處理程序會觸發。在手動註冊事件時，應使用ID，類名稱屬性等更具體。

e或element鏈接函數的屬性是整個指令的jqlite或完整的jQuery對象。如果你在jQuery之前包含了jQuery，它將會是一個完整的jQuery對象。如果沒有，它將會是一個jqlite對象。精簡版的jQu​​ery。

Answer 2

這裏是你的邏輯一個基本的例子裏面的事件。

var TestApp = angular.module('App', []); 

//控制器

TestApp.controller('mainCtrl', function mainCtrl($scope) { 
    $scope.data = []; 
    $scope.addDataItem = function() { 
    $scope.data.push({ 
     someFilield: 'some value' 
    }); 
    console.log('pushing value ... '); 
    } 
}); 

//視圖

<div ng-app="App" class="container" ng-controller="mainCtrl"> 
    <button type="button" ng-click="addDataItem()">Add an input</button> 
    <div ng-repeat="d in data track by $index"> 
    <custom-directive model="d"></custom-directive> 
    </div> 
</div> 

//指令

TestApp.directive('customDirective', function customDirective() { 
    return { 
     restrict: 'E', 
     scope: { 
     model: '=' 
     }, 
     template: 'item -> <input type = "text" />', 
     link: function (scope, elem, attrs) { 
     console.log('scope.model', scope.model); 
     }, 
     controller: function ($scope) { 
     // do staff here 
     } 
    } 
});