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.

  • 相关阅读:
    js 字符串中提取ip地址
    echart lengend 选中事件
    反射与注解
    clientX、clientY、offsetLeft、offsetTop、offsetWidth、offsetHeight
    图片放大和缩小
    拖拽文字辅助线对齐
    文字随着鼠标移动而移动(文字拖拽移动)
    Java 数组转 List 的三种方式及使用场景
    【Docker(二)】Docker镜像、容器、仓库命令详解
    【Docker(一)】走进Docker的第一步
  • 原文地址:https://www.cnblogs.com/oxsir/p/11556255.html
Copyright © 2011-2022 走看看