zoukankan      html  css  js  c++  java
  • AngularJs

    This tip will cover an uncommon issue in Angular – calling a directive method from a controller.

    Introduction

    This tip will cover an uncommon issue in Angular – calling a directive method from a controller.

    I’ve first encountered this issue when I worked with Angular and WinJS on an XBOX project. I needed to open the Settings popup on button click event, but this popup was placed in the directive.

    Normally I would expose a public method in the directive and call it from the Controller, unfortunately that’s not so easy when working with JavaScript since it’s a dynamic language, and the directive is a DOM element.

    The Problem

    The main problem is that directive contained in the controller, which means that the controller recognizes the directive (the controller can call directives methods and pass parameters to him), but the directive has no idea about the controller that he placed in – since directive can appear multiple times in different parts of our program.

    So, if you want to call a directives method from the controller, you would need to work around it.

    The Solution

    We will need to create an empty object in our controller and pass it to the directive as a parameter.

    While receiving it in our directive – we’ll inject a method to it:

    app.directive('myDirective', function () {
        return {
            restrict: 'E',
            scope: {
            /*The object that passed from the cntroller*/
            objectToInject: '=',
            },
            templateUrl: 'templates/myTemplate.html',
    
            link: function ($scope, element, attrs) {
                /*This method will be called whet the 'objectToInject' value is changes*/
                $scope.$watch('objectToInject', function (value) {
                    /*Checking if the given value is not undefined*/
                    if(value){
                    $scope.Obj = value;
                        /*Injecting the Method*/
                        $scope.Obj.invoke = function(){
                            //Do something
                        }
                    }    
                });
            }
        };
    });

    Declaring the directive in the HTML with a parameter:

    <my-directive object-to-inject=" injectedObject"></ my-directive>

    Our Controller:

    app.controller("myController", ['$scope', function ($scope) {
        $scope.injectedObject = {};
    }];

    Adding a button that will invoke the method when clicking on it:

    <input type='button' value='Click Me' ng-click='injectedObject.invoke();' />

    Now we can call the methods from our controller!

    Notice that the controller actually doesn’t know that invoke() method is implemented in our object, all it knows is that this object exists, otherwise we would get an exception while calling a method of undefined object.

  • 相关阅读:
    [湖北省队互测2014] 没有人的算术 (非题解)
    普及常见图论算法整理
    普及常见数据结构板子整理
    Pisano Period
    退役了
    LOJ3246 「USACO 2020.1 Platinum」Cave Paintings
    LOJ3193 「ROI 2019 Day2」机器人高尔夫球赛
    LOJ3192 「ROI 2019 Day2」课桌
    LOJ6496 「雅礼集训 2018 Day1」仙人掌
    Luogu P4518 [JSOI2018]绝地反击
  • 原文地址:https://www.cnblogs.com/oxsir/p/11556255.html
Copyright © 2011-2022 走看看