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

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

javascript angularjs

Javascript 如何从angular指令调用控制器函数,javascript,angularjs,Javascript,Angularjs,我想从指令调用控制器函数。下面是我在控制器中有一个sayHello（）函数的例子。我想从角度指令调用这个函数。如果我喜欢scope.sayHello（）我在控制台中得到了上面的效果。为了让你的小提琴发出警报，我所要做的就是将人添加到你的模板中。您拥有updateparent=“updatePerson（）”，您只需要在该调用中传递person，如下所示：updateparent=“updatePerson（person）”。然后你的警报响了原因是您需要在模板中声明要传递给函数的所有参数。由于

我想从指令调用控制器函数。下面是我在控制器中有一个sayHello（）函数的例子。我想从角度指令调用这个函数。如果我喜欢scope.sayHello（）

我在控制台中得到了上面的效果。

为了让你的小提琴发出警报，我所要做的就是将

人

添加到你的模板中。您拥有

updateparent=“updatePerson（）”

，您只需要在该调用中传递

person

，如下所示：

updateparent=“updatePerson（person）”

。然后你的警报响了

原因是您需要在模板中声明要传递给函数的所有参数。由于您像

updateparent（{person:mandatePerson}）

那样调用它，因此必须将键

person

放入模板中，以便使用该参数调用它。他们必须匹配

Angular指令有

scope

和

controller

两个参数——如果您要调用的方法直接在控制器中的

$scope

上，您可以从scope参数中取消它——如果您使用的是

controllerAs

语法（我建议它是一种语法）您可以取消控制器参数

因此，对于指令

return

对象中的特定情况（直接在

$scope

上的方法），您添加了一个属性

链接

：

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

link

在指令创建时运行一次——如果出于某种原因希望

范围或方法在该范围之外可用，请将其分配给在模块顶层定义的变量。我稍微更改了您的指令，但这就是获得此类功能的方式。

如果你对AngularJS感兴趣，我强烈推荐John papa styleguide。

它将帮助您使用像controllerAs这样的语法，并有助于使您的代码更干净
HTML

原始名称：{{mandat.name}

JS
var-app=angular.module（'myApp'，[]）；
应用控制器（'MainCtrl'，MainController）；
功能主控制器（$scope）{
$scope.mandat={
姓名：“约翰”，
姓氏：“Doe”，
人：{id:1408，名字：“sam”}
};
}
应用指令（“我的指令”，我的指令）；
函数MyDirective（）{
返回{
限制：'E'，
模板：“点击”，
替换：正确，
范围：{
曼达：“=”
},
控制器：功能（$scope）{
$scope.updateparent=function（）{
$scope.mandat.name=“monkey”；
}
}
}
}

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

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

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