Question

我正在尝试以角度制作自定义指令。我尝试在单击按钮时在我的视图中添加输入字段。换句话说，我正在尝试制作一个自定义指令，当用户按下按钮时，它会添加一个输入浏览器中的字段。我认为如果我不使用自定义指令就太容易了。如果我只使用控制器，那么当用户点击按钮并且控制器上出现按钮点击时，我接受一个数组并在数组中推送项目。

但是当需要制作自定义指令时，我将在控制器或指令中编写我的按钮单击事件

这是我的代码 http://play.ionic.io/app/23ec466dac1d

@*ToMany

我只需要在用户使用自定义指令点击按钮时添加输入字段。你能告诉我我在哪里做错了吗？

我们可以在指令

中制作按钮模板和点击事件

Answer 1

它不起作用的原因是你用jQuery注册你的点击处理程序。因此，当点击处理程序触发时，它超出了角度范围，因此角度不知道它需要更新其绑定。

所以你有两个选择，第一个是在点击处理程序中告诉角度，＆＃39;哟伙伴，更新你的绑定＆＃39;。这是使用$scope.$apply

完成的

$ apply docs：https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope＃$ apply

        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>

然后在您的链接中添加范围的add()方法

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

这是一个显示两个例子的工作小提琴。 http://jsfiddle.net/3dgdrvkq/

编辑：还注意到初始点击处理程序中的一个小错误。您注册了一个单击但没有指定要应用它的按钮。因此，如果您单击指令中的任何位置，而不仅仅是按钮，则会触发处理程序。在使用id，类名属性等手动注册事件时，您应该更具体。

link函数的e或element属性是整个指令的jqlite或完整jQuery对象。如果在angular之前包含jQuery，它将是一个完整的jQuery对象。如果不是，它将是一个jqlite对象。 jQuery的稀疏版本。

Answer 2

这是您逻辑的基本示例。

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

// controller

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

如何在角度中制作自定义指令？

2 个答案: