angularjs - ionic 事件不会触发内部指令

Question

我想在加载 View 后/进入该 View 后执行一个函数。

我的目录如下:

app.directive('bonFormViewerFrame', function ($formStore) {
return {
    restrict: 'E', //bind to element tag name
    replace: true, //replace the entire markup with the template
    templateUrl: 'ui/controls/bon-form-viewer-frame.html',
    scope: {
        form: '=' //specifies the item to be displayed.
    },
    controller: ['$scope', function ($scope) {

        $scope.formContent = ($scope.form != null) ? $scope.form.Content : "";

        $scope.$on("$ionicView.beforeEnter", function (event, data) {
            // handle event
            console.log("State Params: ", data.stateParams);
        });

        $scope.$on("$ionicView.enter", function (event, data) {
            // handle event
            console.log("State Params: ", data.stateParams);
        });

        $scope.$on("$ionicView.afterEnter", function (event, data) {
            // handle event
            console.log("State Params: ", data.stateParams);
        });


    }]
};

});

以上$ionicView 事件均未触发。谁能帮我吗？或者我在这里做错了什么？

Answer 1

None of the above $ionicView events are firing.

好吧，如果您检查 ionic.bundle.js，您可以找到以下几行:

enteringScope.$emit('$ionicView.enter', enteringData);
enteringScope.$broadcast('$ionicParentView.enter', enteringData);

供引用:

• $broadcast -- 将事件向下分发到所有子范围，
• $emit -- 通过范围层次结构向上调度事件。

$ionicView 使用 $emit

问题是，你的指令有不同的范围——你的主 Controller 的 child

所以你需要$ionicParentView a.e.:

$scope.$on("$ionicParentView.beforeEnter", function (event, data) {
     // ...

});

Demo Plunker

---

结果:

~+~+~ CTRL~+~+~ 
CTRL: on beforeEnter
~+~+~ DIR ~+~+~
CTRL: on enter
DIR: on enter
CTRL: on afterEnter
DIR: on afterEnte

---

但是，如果您的指令加载延迟并且 ionic 在您的指令 Controller 注册到事件之前广播了这些事件 - 您与它无关