Question

我想从指令调用控制器函数。这是fiddle.我在控制器中有一个sayHello（）函数。我想从angular指令调用该函数。如果我像scope.sayHello（）;

scope.sayHello is not a function

我在控制台中得到了上述内容。

Answer 1

为了让您的小提琴发出警报，我必须做的就是将person添加到您的模板中。您拥有updateparent="updatePerson()"，并且您只需要在该通话中传递person，如下所示：updateparent="updatePerson(person)"。然后你的警报开了。

原因是您需要在模板中声明要传递给函数的所有参数。由于您将其称为updateparent({person: mandatePerson})，因此您必须将密钥person放入模板中，然后使用该参数调用它。他们必须匹配。

Answer 2

Angular指令的link function包含scope和controller的参数 - 如果您要调用的方法直接位于控制器中的$scope，则只需调用它超出范围arg--如果你使用controllerAs语法（我建议它是recommended Angular pattern），你可以从控制器参数中调用它。

因此，对于您的指令$scope对象中的特定情况（直接在return上的方法），您添加了一个属性link：

link: function (scope, iElement, iAttrs, controller, transcludeFn)
    scope.sayHello();
}

link在创建指令时运行一次 - 如果由于某种原因希望scope或方法在其外部可用，请将其分配给在模块顶层定义的变量。

Answer 3

我稍微改变了你的指令，但这就是你获得这种功能的方式。 FIDDLE

如果您对AngularJS感兴趣，我强烈推荐John papa styleguide。 https://github.com/johnpapa/angular-styleguide

它将使您使用类似controllerAs的语法，并有助于使您的代码更清晰。

HTML

<body ng-app="myApp" ng-controller="MainCtrl">
    <div>
      Original name: {{mandat.name}}
    </div>
    <my-directive mandat="mandat"></my-directive>
</body>

JS

var app = angular.module('myApp', []);
app.controller('MainCtrl', MainController);

function MainController($scope) {
  $scope.mandat = {
    name: "John",
    surname: "Doe",
    person: { id: 1408, firstname: "sam" }
  };
}

app.directive('myDirective', MyDirective);

function MyDirective() {
  return {
    restrict: 'E',
    template: "<div><input type='text' ng-model='mandat.person.firstname' /><button ng-click='updateparent()'>click</button></div>",
    replace: true,
    scope: {
      mandat: "="
    },
    controller: function($scope) {
      $scope.updateparent = function() {
        $scope.mandat.name = "monkey";
      }
    }
  }
}

如何从angular指令调用控制器函数

3 个答案: