gpt4 book ai didi

javascript - AngularJS:从指令函数访问模板的 Controller

转载 作者:太空宇宙 更新时间:2023-11-04 15:33:41 24 4
gpt4 key购买 nike

假设我有一个指令 mydir应用于<body>元素:

<body data-ng-app="..." id="app" data-ng-controller="AppCtrl" mdir> .

内部<body>我有一个嵌入 <div>用于模板:

<div data-ng-view class="main-container"></div>

我的模板有一个专用 Controller :

<div ng-controller="Controller1Ctrl as ctrl1">...</div>

Controller1Ctrl有一个声明的函数foo() :

app.controller("Controller1Ctrl ", ['$scope',
function ($scope) {
$scope.foo = function() {
console.log("I am in foo...");
...
}
}
]);

我想调用这个函数foo()来 self 对某些事件的指令(假设 scroll ):

app.directive("mydir", function ($document, $route) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
$document.bind('scroll', function (evt) {
scope.$apply(attrs.scrollable);
// here!
scope.$apply("ctrl1.foo()");
console.log("Just invoked foo()");
});
}
};
});

问题是 scope.$apply("ctrl1.foo()");什么也没做。控制台中没有错误。我在那里看到我的“Just invoked foo()”日志,但没有“I am in foo...”。我想这是因为mydir指令根本看不到 ctrl1目的。当我在页面上看到模板的内容时(因此它是事件模板)。

但是我怎样才能实现它呢?

是的,我无法申请mydir<div>内部模板。请不要问为什么,根本就不能。应严格适用于<body> .

最佳答案

您可以使用 $broadcast 触发自定义事件。

根据您的指令广播事件

scope.$broadcast('myEvent', myVariable);

然后在 Controller 中监听该事件

$scope.$on('myEvent', (event, myVariable) => {
// deal with the event
});

编辑

指令

app.directive("mydir", function ($document, $route) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
$document.bind('scroll', function (evt) {
scope.$apply(attrs.scrollable);
console.log("Just invoked foo()");

// Broadcast the event
scope.$broadcast('myEvent');

});
}
};
});

Controller

app.controller("Controller1Ctrl ", ['$scope',
function ($scope) {

$scope.foo = function() {
console.log("I am in foo...");
...
}

// listen for the event
// call $scope.foo() every time the event is received
$scope.$on('myEvent', (event) => $scope.foo());

}
]);

关于javascript - AngularJS:从指令函数访问模板的 Controller ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44587034/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com