Question

我正在尝试自动完成，为此我使用标签输入。指令名称是my-directive，Inside控制器我试图调用selectUser函数，但它不起作用。

在自动完成时，你必须输入4个字母，如：john，然后我会显示选项..

查看

  <body ng-app="myApp" ng-controller="appCtrl">
    <my-directive  apipoint="customerApi" modeldisplay="tags.selected"  ng-model="tags.selected" change="selectUser(tags.selected)"></my-directive>
  </body>

控制器

app.controller("appCtrl", function($scope){     
  $scope.tags = {};
  $scope.tags.selected = [];
  $scope.customerApi = ['tags.json'];
  $scope.selectUser = function(foo)  {
    $scope.aux = foo;
    alert();
  };
});

指令

app.directive("myDirective", ['$http',function($http){
  return {
    restrict: "E",
    template : 'Here Use tag-input: <tags-input ng-model="modeldisplay"'+
     'ng-change="change(modeldisplay)">'+
     '<auto-complete source="loadTags($query)"></auto-complete>'+
     '</tags-input>',
    require: 'ngModel',
    scope : {
      modeldisplay: "=",
      apipoint: "="
    },
    link : function(scope, element, attrs, ctrl){
      scope.loadTags = function(query) {
         return $http.get(scope.apipoint[0]);
      };
      scope.change = function(item){
        ctrl.$setViewValue(item);
      }
    }
  };
}]);

** DEMO / Now Working **

Plunker Demo

还有一件事我的方法是对的吗？理由背后是，在Angularjs View中，我想使用自动完成指令oneline，我想把它作为通用方法......

Answer 1

你需要这样的东西吗？

Plunker Demo

指令变更：

link: function(scope, element, attrs, ctrl) {
  scope.loadTags = function(query) {
    return $http.get(scope.apipoint[0]);
  };
  scope.updateModel = function(item) {
    ctrl.$setViewValue(item);
  };
},
controller: ['$scope', function($scope) {
  $scope.$watch('modeldisplay', function(newVal) {
    $scope.updateModel(newVal);
  });
}],

如果您需要更多解释，请阅读此内容：

How to implement an ng-change for a custom directive

Answer 2

您应该执行一些更改来运行控制器功能。

以下是工作人员Plunker

您使用的第三方指令未提供更改。是的，但它提供了on-tag-added="change1(modeldisplay)。所以ng-change无效。
您已在my-directive的更改属性中传递了函数，并且您的指令范围中再次出现了另一个更改函数，即创建误解。
您使用范围访问传递的函数，但您未在指令隔离范围中提及此功能。这就是在指令范围内无法访问传递函数的原因。

如何在指令中使用ng-change函数？

2 个答案: