Як выклікаць метад, пэўны ў дырэктыве AngularJS?

У мяне ёсць дырэктыва, вось код:

.directive('map', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        link: function($scope, element, attrs) {

            var center = new google.maps.LatLng(50.1, 14.4); 
            $scope.map_options = {
                zoom: 14,
                center: center,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
           //create map
            var map = new google.maps.Map(document.getElementById(attrs.id), $scope.map_options);
            var dirService= new google.maps.DirectionsService();
            var dirRenderer= new google.maps.DirectionsRenderer()

            var showDirections = function(dirResult, dirStatus) {
                if (dirStatus != google.maps.DirectionsStatus.OK) {
                    alert('Directions failed: ' + dirStatus);
                    return;
                  }
                 //Show directions
                dirRenderer.setMap(map);
                //$scope.dirRenderer.setPanel(Demo.dirContainer);
                dirRenderer.setDirections(dirResult);
            };

           //Watch
            var updateMap = function(){
                dirService.route($scope.dirRequest, showDirections); 
            };    
            $scope.$watch('dirRequest.origin', updateMap);

            google.maps.event.addListener(map, 'zoom_changed', function() {
                $scope.map_options.zoom = map.getZoom();
              });

            dirService.route($scope.dirRequest, showDirections);  
        }
    }
})

Я хацеў бы назваць updateMap() на дзеянні карыстальніка. Кнопка дзеянні не на дырэктыве.

Які найлепшы спосаб выкліку updateMap() з кантролера?

282
Невялікая рэмарка: Канвенцыя не выкарыстоўваць знак даляра за «рамку» у функцыі сувязі, таму што вобласць не ўводзіцца, але прынятай у якасці звычайнага аргументу.
дададзена аўтар Noam, крыніца

13 адказы

Калі вы хочаце выкарыстоўваць асобныя вобласці дзеянні вы можаце перадаць аб'ект кіравання з выкарыстаннем двунакіраванага звязвання = зменнай з вобласці кантролера. Акрамя таго, можна кіраваць таксама некалькі асобнікаў аднаго і таго ж дырэктывы на старонцы з тым жа аб'ектам кіравання.

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

angular.module('directiveControlDemo', [])

.controller('MainCtrl', function($scope) {
  $scope.focusinControl = {};
})

.directive('focusin', function factory() {
  return {
    restrict: 'E',
    replace: true,
    template: '<div>A:{{internalControl}}</div>',
    scope: {
      control: '='
    },
    link: function(scope, element, attrs) {
      scope.internalControl = scope.control || {};
      scope.internalControl.takenTablets = 0;
      scope.internalControl.takeTablet = function() {
        scope.internalControl.takenTablets += 1;
      }
    }
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="directiveControlDemo">
  <div ng-controller="MainCtrl">
    <button ng-click="focusinControl.takeTablet()">Call directive function</button>
    
In controller scope: {{focusinControl}}


In directive scope:


Without control object:

</div> </div>
</div> </div>
348
дададзена
@OliverWienand я зразумеў гэта - калі я выкарыстаў абмежаванне: «EA», спасылка() не датэлефанавалася. Калі я абмежаваць «E», то спасылка() выклікаецца. Нечаканы.
дададзена аўтар Alexander Mills, крыніца
@OliverWienand дзякуй, ды я ўпэўнены, што ёсць нешта іншае пра код я выкарыстоўваю
дададзена аўтар Alexander Mills, крыніца
праблема для мяне (я на кутніх 1.6) з'яўляецца тое, што scope.internalControl.takeTablet ня быць ўстаноўлена, перш чым ён будзе выкліканы.
дададзена аўтар Alexander Mills, крыніца
Гэта exatcly як я вырашыў такую ​​ж праблему. Гэта працуе, але гэта выглядае як хак ... Я жадаю Кутняе было лепшае рашэнне для гэтага.
дададзена аўтар Dema, крыніца
Гэты хак працуе добра толькі для выкліку функцыі без якіх-небудзь параметраў. Глядзіце прыклад з праходжаннем аднаго параметру - прыклад Plunk .
дададзена аўтар Egel, крыніца
@OliverWienand Так, але я не хачу выкарыстоўваць кантролер спецыяльна для гэтай дырэктывы. Тое, што я проста паставіў звязванне ў функцыі папярэдняй сувязі, і яна працавала. Дзякуй за ваш адказ!
дададзена аўтар Alburkerk, крыніца
Як вы можаце быць упэўнены, што дырэктыва ўжо ўсталяваны атрыбут функцыі перад выклікам функцыі з кантролера?
дададзена аўтар Alburkerk, крыніца
@OliverWienand Добра, цяпер я бачу, дзякуй. Але я не ўпэўнены, што ў яшчэ адну рэч: што гэта чароўны спосаб, з дапамогай якога $ scope.focusinControl спасылаецца на той жа аб'ект, як і scope.internalControl ўнутры дырэктывы? Ці з'яўляецца гэта з дапамогай атрыбуту кіравання = "focusinControl" у дырэктывы тэга?
дададзена аўтар Mikhail Batcer, крыніца
Пытанне заключаўся ў тым, «Што такое лепшы спосаб выклікаць updateMap() ад кантролера?». У гэтым адказе, я не бачу ніякіх выклікаў функцый ў кантролеры. Можа хто-то калі ласка, скажыце мне, дзе гэта?
дададзена аўтар Mikhail Batcer, крыніца
Я вучуся вуглаватым, так што маё меркаванне можа не займаць шмат вагі, але я знайшоў гэты падыход значна больш зразумелым, чым іншы адказ і быў бы адзначаны яго правільны адказ. Я рэалізаваў гэта ў маім ізаляваным ўжыванні з нулявой праблемай.
дададзена аўтар BLSully, крыніца
Мне падабаецца гэта рашэнне шмат. Маё адзінае схопліванне з ім неабходна стварыць пусты аб'ект перад выклікам дырэктыву: $ scope.focusinControl = {}; , які выглядае проста няправільна.
дададзена аўтар VitalyB, крыніца
Вы, верагодна, варта зрабіць праверку, каб пераканацца, што scope.control існуе, у адваротным выпадку ў іншых месцах, якія выкарыстоўваюць дырэктыву, але не трэба для доступу да метадаў дырэктывы і не маюць кіравання АТР пачне кідаць памылкі аб немагчымасці ўстанавіць атрыбуты на не вызначаны
дададзена аўтар CheapSteaks, крыніца
Гэта чысцей, чым прынята адказваць, і +1 для даведкі Сімпсаны, калі я не памыляюся
дададзена аўтар Blake Miller, крыніца
вялікі дзякуй. Я шукаў гэта. Мне трэба было гэта як апошні кавалак галаваломкі, каб пачаць ствараць шматразовыя вуглавыя кампаненты.
дададзена аўтар CodeGems, крыніца
@OliverWienand я даведаўся, што я атрымліваю нявызначаныя метады пры выкананні ў НГ-калі ў HTML вакол дырэктывы. Як толькі я зняў яго, усё было добра. Дзякуй за адказ!
дададзена аўтар GentryRiggen, крыніца
Хто-небудзь знайсці, што метад вы размяшчае на кантролі не вызначаны адразу? Калі загарнуць знешні выклік метаду ўнутранага з $ таймаўт толькі 100ms гэта працуе, але мне не падабаецца, што рашэнне ... Хто-небудзь яшчэ?
дададзена аўтар GentryRiggen, крыніца
+1 Гэта таксама, як я ствараю API, для маіх паўторна выкарыстоўваюцца кампанентаў у кутоў.
дададзена аўтар romiem, крыніца
@AlexanderMills: Я проста правяраў у гэтым бухнуть plnkr.co/edit/L4YTTt?p=preview </а> і, здаецца, добра з 1.6.5.
дададзена аўтар Oliver Wienand, крыніца
@Alburkerk: Вы праверылі мой адказ на @GentryRiggen?
дададзена аўтар Oliver Wienand, крыніца
Абноўлены прыклад таксама працаваць, калі няма знешняга аб'екта кіравання не даецца. Дзякуючы CheapSteaks.
дададзена аўтар Oliver Wienand, крыніца
@MikhailBatcer да. Дырэктыва атрымлівае новую спасылку на аб'ект, на які спасылаецца $ scope.focusinControl і, такім чынам, метад паставіць на аб'екце з дапамогай дырэктывы таксама даступны з арыгінальнай спасылкі. Радок scope.internalControl = scope.control || {}; , дзе чараўніцтва адбываецца;)
дададзена аўтар Oliver Wienand, крыніца
Секчы таксама працуе з параметрамі. Вы павінны паставіць іх на $ рамкі для таго, каб быць даступнымі, напрыклад, <�Код> $ scope.num = 4 замест Num = 4 .
дададзена аўтар Oliver Wienand, крыніца
@MikhailBatcer: Выклік focusinControl.takeTablet() ўнутры НГ кнопкай мышы больш ці менш у кантролеры. Вы таксама можаце выклікаць $ scope.focusinControl.takeTablet() у любым месцы ўнутры самога кантролера. Я паклаў яго на НГ пстрыкніце толькі для сцісласці і каб пазбегнуць непатрэбных карэньчыкаў.
дададзена аўтар Oliver Wienand, крыніца
@GentryRiggen: Я мяркую, што вы хочаце, каб выклікаць метад дырэктывы падчас будаўніцтва сферы? У гэтым выпадку я хацеў бы прапанаваць, каб змяніць дырэктыву, што ён прымае ўсе, што вы хочаце мець зносіны з дырэктывай з метадам ў якасці асобнага аргументу. (Не глыбока чытаць, але, магчыма, таксама праверыць groups.google.com/ форум/#! тэма/кутні/4rbZi97QCGc )
дададзена аўтар Oliver Wienand, крыніца

Калі выказаць здагадку, што дзеянне кнопкі выкарыстоўвае той жа кантролер $ сфера у якасці дырэктывы, проста вызначыць функцыю updateMap на $ вобласці бачнасці ўнутры функцыі сувязі. Ваш кантролер можа затым выклікаць гэтую функцыю, калі дзеянне кнопкі націснутая.

<div ng-controller="MyCtrl">
     <button ng-click="updateMap()">call updateMap()</button> </div> 
app.directive('map', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        link: function($scope, element, attrs) {
            $scope.updateMap = function() {
                alert('inside updateMap()');
            }
        }
    }
});

скрыпку


Згодна з @ каментар FlorianF, у выпадку, калі дырэктыва выкарыстоўвае ізаляваную сферу, усё больш складана. Вось адзін са спосабаў прымусіць яго працаваць: дадаць Set-Fn атрыбут ў карта дырэктыва, якая будзе рэгістраваць функцыю дырэктывы з кантролерам:

 <button ng-click="directiveFn()">call directive function</button> 
scope: { setFn: '&' },
link: function(scope, element, attrs) {
    scope.updateMap = function() {
       alert('inside updateMap()');
    }
    scope.setFn({theDirFn: scope.updateMap});
}
function MyCtrl($scope) {
    $scope.setDirectiveFn = function(directiveFn) {
        $scope.directiveFn = directiveFn;
    };
}

скрыпку

69
дададзена
Што рабіць, калі дырэктыва мае ізаляваную сферу?
дададзена аўтар Florian F, крыніца
Дзякуй! (Можа быць, гэта было б лягчэй выклікаць функцыю, пэўную ў рэгулятары дырэктывы, але я не ўпэўнены, што)
дададзена аўтар Florian F, крыніца
Гэта значна лепш, калі вы не маеце справу з ізаляванай вобласцю.
дададзена аўтар Martin Frank, крыніца
Адказ на гэтае пытанне на самай справе адказвае на пытанне ОП. Ён таксама выкарыстоўваць ізаляваны аб'ём, для таго, каб мець ізаляваную сферу вам трэба толькі дадаць маштаб ўласцівасць ў аб'яве дырэктывы.
дададзена аўтар Daniel G., крыніца

Хоць гэта можа быць павабным, каб выставіць аб'ект на ізаляваным аб'ёме дырэктывы для палягчэння зносін з ім, рабіць можа прывесці да заблытанага коду «спагецці», асабліва калі вам трэба прыкаваць гэта паведамленне праз пару узроўняў (кантролер, да дырэктывы, да укладзенай дырэктыве і г.д.)

Спачатку мы пайшлі па гэтым шляху, але пасля таго, як яшчэ некалькі даследаванняў выявілі, што ён зрабіў больш сэнсу і прывёў да больш абслугоўваемаму і чыталі коду, каб выкрыць падзеі і ўласцівасць, што дырэктыва будзе выкарыстоўваць для сувязі праз службу затым з дапамогай $ гадзін на ўласцівасцях, што абслугоўванне ў дырэктыва або любыя іншыя элементы кіравання, якія павінны былі б рэагаваць на гэтыя змены для зносін.

Гэтая абстракцыя працуе вельмі добра з рамкай ін'екцыі залежнасцяў AngularJS, як вы можаце ўкараніць паслугу ў любыя аб'екты, якія павінны рэагаваць на гэтыя падзеі. Калі вы паглядзіце на Angular.js файл, вы ўбачыце, што дырэктывы ў там таксама карыстацца паслугамі і $ глядзець такім чынам, яны не падвяргаць падзеі больш ізаляванай вобласці.

І, нарэшце, у тым выпадку, калі вам трэба звязваць паміж дырэктывамі, якія залежаць адзін ад аднаго, я б рэкамендаваў дзяліць кантролер паміж гэтымі дырэктывамі ў якасці сродку камунікацыі.

AngularJS's Wiki for Best Practices also mentions this:

<�Р> выкарыстоўваць толькі. $ Радыёперадачы (). $ Выпусканага() і. $ На() для атамных падзей   Падзеі, якія маюць дачыненне глабальна па ўсім дадатак (напрыклад, ідэнтыфікацыі карыстальніка ці закрыцця прыкладання). Калі вы хочаце падзеі, спецыфічныя для модуляў, паслуг або віджэтаў вы павінны разгледзець паслугі, Дырэктыва Controllers або трэцяя партыя Libs      
      
  • $ сфера. $ Гадзіннік() варта замяніць неабходнасць падзей
  •   
  • Ін'екцыя паслугі і выклік метадаў непасрэдна таксама карысна для непасрэднага зносін
  •   
  • Дырэктывы могуць напрамую ўзаемадзейнічаць адзін з адным праз дырэктыву кантралёры
  •   
34
дададзена
Вы б не выставіць switchTab (TabIndex) метад, вы б звязваць толькі TabIndex зменнай. Ваш кантролер старонкі можа мець дзеянні, якія змяняюць гэта зменныя. Вы звязваеце/перадаць гэтую зменную ў вашай закладцы Дырэктывы. Ўкладка Дырэктыва можа затым назіраць гэтую зменную для змен, а таксама выконваць switchTab яго ўласнага згоды. Паколькі дырэктыва вызначае, калі/як кантраляваць свае ўкладкі на аснове зменнай. Гэта не праца вонкавай крыніцы, у адваротным выпадку знешнія крыніцы патрабуе веды ўнутранай працы дырэктывы, якая дрэнна m'kay.
дададзена аўтар Suamere, крыніца
Я дасягнуў двух рашэнняў інтуітыўна: (1) назіраць за змяненнем аб'ёму зменнай = , пераменная ўтрымлівае імя і аргументы метаду. (2) выставіць аднабаковы прывязкі радок @ як ідэнтыфікатар падзелу, і хай выкліканыя адправіць падзея па гэтай тэме. Цяпер я бачыў лепшую практыку віку. Я думаю, што ёсць прычына, каб не зрабіць гэта ў траўні шляху. Але я да гэтага часу не вельмі зразумела, як гэта працуе. У маім выпадку, я стварыў дырэктыву tabset, я хачу выставіць switchTab (TabIndex) метад. Маглі б вы прыклад больш?
дададзена аўтар stanleyxu2005, крыніца

Абапіраючыся на адказ Олівера - не заўсёды, магчыма, спатрэбіцца доступ да унутраным метадам дырэктыву, а ў тых выпадках, верагодна, вы не хочаце, каб стварыць пусты аб'ект і дадаць кіравання АТР дырэктыве толькі каб прадухіліць яго кідання памылку ( не можа ўсталяваць ўласцівасць «takeTablet» нявызначанай ).

Вы таксама можаце выкарыстоўваць гэты метад у іншых месцах у межах дырэктывы.

Я хацеў бы дадаць праверку, каб пераканацца, што scope.control існуе, і набор метады да яго ў падобнай манеры да адкрытага шаблоне модуля

app.directive('focusin', function factory() {
  return {
    restrict: 'E',
    replace: true,
    template: '<div>A:{{control}}</div>',
    scope: {
      control: '='
    },
    link : function (scope, element, attrs) {
      var takenTablets = 0;
      var takeTablet = function() {
        takenTablets += 1;  
      }

      if (scope.control) {
        scope.control = {
          takeTablet: takeTablet
        };
      }
    }
  };
});
15
дададзена
пляма на, выкарыстоўваючы паказальны ўзор ўнутры дырэктыва робіць намер нашмат больш ясна. добры адзін!
дададзена аўтар JSancho, крыніца

Трохі позна, але гэта рашэнне з ізаляванай сферай і «падзеяй» для выкліку функцыі ў дырэктыве. Гэта рашэнне натхнёнае гэты SO паведамленне на satchmorun і дадае модуль і API.

//Create module
var MapModule = angular.module('MapModule', []);

//Load dependency dynamically
angular.module('app').requires.push('MapModule');

Стварэнне API для сувязі з дырэктывай. AddUpdateEvent дадае падзея ў масіве падзей і updateMap выклікае кожную функцыю падзеі.

MapModule.factory('MapApi', function() {
    return {
        events: [],

        addUpdateEvent: function (func) {
            this.events.push(func);
        },

        updateMap: function() {
            this.events.forEach(function (func) {
                func.call();
            });
        }
    }
});

(Можа быць, вы павінны дадаць функцыю, каб выдаліць падзея.)

У дырэктыве ўсталяваць спасылку на MAPAPI і дадаць $ scope.updateMap як падзея, калі MapApi.updateMap называецца.

app.directive('map', function() {
    return {
        restrict: 'E', 
        scope: {}, 
        templateUrl: '....',
        controller: function ($scope, $http, $attrs, MapApi) {

            $scope.api = MapApi;

            $scope.updateMap = function() {
                //Update the map 
            };

            //Add event
            $scope.api.addUpdateEvent($scope.updateMap);

        }
    }
});

У «асноўнай» кантролер дадаць спасылку на MAPAPI і проста выклічце MapApi.updateMap (), каб абнавіць карту.

app.controller('mainController', function ($scope, MapApi) {

    $scope.updateMapButtonClick = function() {
        MapApi.updateMap();    
    };
}
10
дададзена
Гэтую прапанову спатрэбіцца крыху больш працы ў рэальным свеце, калі ў вас ёсць некалькі дырэктыў аднаго тыпу ў залежнасці ад вашага сэрвісу API. Вы ўпэўненыя, што атрымаеце ў сітуацыі, калі вам трэба наладзіць таргетынг і выклікаць функцыі толькі з адной канкрэтнай дырэктывы і не ўсе з іх. Вы хочаце палепшыць свой адказ з рашэннем гэтага?
дададзена аўтар smajl, крыніца

Шчыра кажучы, я не быў сапраўды перакананы, з якой-небудзь з адказаў у гэтай тэме. Такім чынам, вось мае рашэнні:

Дырэктыва Handler (менеджэр) падыход

Гэты метад з'яўляецца незалежным ад таго, ці быў дырэктывы $ вобласці бачнасці з'яўляецца агульнай адзін або ізаляваны адзін

А фабрыка , каб зарэгістраваць асобнікі дырэктывы

angular.module('myModule').factory('MyDirectiveHandler', function() {
    var instance_map = {};
    var service = {
        registerDirective: registerDirective,
        getDirective: getDirective,
        deregisterDirective: deregisterDirective
    };

    return service;

    function registerDirective(name, ctrl) {
        instance_map[name] = ctrl;
    }

    function getDirective(name) {
        return instance_map[name];
    }

    function deregisterDirective(name) {
        instance_map[name] = null;
    }
});

Код дырэктывы, я звычайна стаўлю ўсю логіку, якая не займаецца DOM ўнутры кантролера дырэктывы. І рэгіструючы асобнік кантролера ўнутры нашага апрацоўшчыка

angular.module('myModule').directive('myDirective', function(MyDirectiveHandler) {
    var directive = {
        link: link,
        controller: controller
    };

    return directive;

    function link() {
        //link fn code
    }

    function controller($scope, $attrs) {
        var name = $attrs.name;

        this.updateMap = function() {
            //some code
        };

        MyDirectiveHandler.registerDirective(name, this);

        $scope.$on('destroy', function() {
            MyDirectiveHandler.deregisterDirective(name);
        });
    }
})

код шаблону

<div my-directive name="foo"></div>

Access the controller instance using the factory & run the publicly exposed methods

angular.module('myModule').controller('MyController', function(MyDirectiveHandler, $scope) {
    $scope.someFn = function() {
        MyDirectiveHandler.get('foo').updateMap();
    };
});

Падыход ANGULAR ў

Узяўшы ліст з кнігі кутні пра тое, як яны маюць справу з

<form name="my_form"></form>

using $parse and registering controller on $parent scope. This technique doesn't work on isolated $scope directives.

angular.module('myModule').directive('myDirective', function($parse) {
    var directive = {
        link: link,
        controller: controller,
        scope: true
    };

    return directive;

    function link() {
        //link fn code
    }

    function controller($scope, $attrs) {
        $parse($attrs.name).assign($scope.$parent, this);

        this.updateMap = function() {
            //some code
        };
    }
})

Access it inside controller using $scope.foo

angular.module('myModule').controller('MyController', function($scope) {
    $scope.someFn = function() {
        $scope.foo.updateMap();
    };
});
9
дададзена
Не, гэта будзе $ scope.foo , так як наш шаблон <div мой дырэктывы імя = "Foo"> <div /> і назва </код > значэнне атрыбуту з'яўляецца «Foo». <�Код> <�форма гэта проста прыклад аднаго з дырэктывы кутняй, які выкарыстоўвае гэтую тэхніку
дададзена аўтар Mudassir Ali, крыніца
«Падыход ANGULAR ў» выглядае цудоўна! Там памылка друку, хоць: $ scope.foo павінен быць $ scope.my_form
дададзена аўтар Daniel D, крыніца

Вы можаце паказаць атрыбут DOM, які можа быць выкарыстаны, каб дырэктыва, каб вызначыць функцыю бацькоўскай вобласці. Бацькоўскай вобласці можа затым выклікаць гэты метад, як і любы іншы. Вось ў plunker. І ніжэй адпаведны код.

clearfn is an attribute on the directive element into which the parent scope can pass a scope property which the directive can then set to a function that accomplish's the desired behavior.

<!DOCTYPE HTML>

  <head>
    <script data-require="[email protected]*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    
  </head>
  <body ng-controller="mycontroller">
    

Call method on directive

    <button ng-click="clear()">Clear</button>
    
    <script>
      var app = angular.module('myapp', []);
      app.controller('mycontroller', function($scope){
      });
      app.directive('myBox', function(){
        return {
          restrict: 'E',
          scope: {
            clearFn: '=clearfn'
          },
          template: '',
          link: function(scope, element, attrs){
            element.html('Hello World!');
            scope.clearFn = function(){
              element.html('');
            };
          }
        }
      });
    </script>
  </body>
</html>
5
дададзена
Гэта становіцца часткай сферы дзеяння дырэктывы, як толькі вы аб'яўляеце яго (напрыклад, вобласць ужывання: {clearFn: ​​«= clearfn»} ).
дададзена аўтар Trevor, крыніца
Я не разумею, чаму гэта працуе .. гэта таму, што ясна атрыбут знаходзіцца ў вобласці бачнасці, як некаторыя?
дададзена аўтар Quinn Wilson, крыніца

Вы можаце паказаць імя метаду ў дырэктыве вызначыць, якія вы хочаце тэлефанаваць з кантролера, але без изолята сферы,

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

angular.module("app", [])
  .directive("palyer", [
    function() {
      return {
        restrict: "A",
        template:'<div class="player"></div>',
        link: function($scope, element, attr) {
          if (attr.toPlay) {
            $scope[attr.toPlay] = function(name) {
              $scope.text = name + " playing...";
            }
          }
        }
      };
    }
  ])
  .controller("playerController", ["$scope",
    function($scope) {
      $scope.clickPlay = function() {
        $scope.play('AR Song');
      };
    }
  ]);
.player{
  border:1px solid;
  padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="playerController">
    
Click play button to play



<button ng-click="clickPlay()">Play</button> </div> </div>
</div> </div>
2
дададзена

Проста выкарыстоўвайце сферу. $ Бацька асацыяванай функцыі, званай дырэктывай функцыі

angular.module('myApp', [])
.controller('MyCtrl',['$scope',function($scope) {

}])
.directive('mydirective',function(){
 function link(scope, el, attr){
   //use scope.$parent to associate the function called to directive function
   scope.$parent.myfunction = function directivefunction(parameter){
     //do something
}
}
return {
        link: link,
        restrict: 'E'   
      };
});

у HTML

<div ng-controller="MyCtrl">
    
    <button ng-click="myfunction(parameter)">call()</button>
</div>
2
дададзена

TESTED Hope this helps someone.

Мой просты падыход (Think тэгаў у зыходным кодзе)

<html>
<div ng-click="myfuncion"> 

</html>


callfunction:"=callfunction"
link : function(scope,element,attr) {
scope.callfunction = function() {
 /// your code
}
}

1
дададзена

Як атрымаць кантролер дырэктывы ў кантролеры старонкі:

  1. write a custom directive to get the reference to the directive controller from the DOM element:

    angular.module('myApp')
        .directive('controller', controller);
    
    controller.$inject = ['$parse'];
    
    function controller($parse) {
        var directive = {
            restrict: 'A',
            link: linkFunction
        };
        return directive;
    
        function linkFunction(scope, el, attrs) {
            var directiveName = attrs.$normalize(el.prop("tagName").toLowerCase());
            var directiveController = el.controller(directiveName);
    
            var model = $parse(attrs.controller);
            model.assign(scope, directiveController);
        }
    }
    
  2. use it in the page controller's html:

    
    
  3. Use the directive controller in the page controller:

    vm.myDirectiveController.callSomeMethod();
    

Заўвага: дадзенае рашэнне працуе толькі для кантролераў дырэктыў элемента (імя тэга выкарыстоўваецца для атрымання імя Адшукваецца дырэктывы).

0
дададзена

Можа быць, гэта не самы лепшы выбар, але вы можаце зрабіць angular.element ( "# элемент"). IsolateScope() або $ ( "# элемент"). IsolateScope() </код > для доступу да вобласці прымянення і/або кантролер вашай дырэктывы.

0
дададзена

Ніжэй рашэнне будзе карысна, калі вы маеце кантралёры (як бацька і дырэктыва (ізалявана)) у «кантролеры як" фармат

хтосьці можа апынуцца карысным,

дырэктыва:

var directive = {
        link: link,
        restrict: 'E',
        replace: true,
        scope: {
            clearFilters: '='
        },
        templateUrl: "/temp.html",
        bindToController: true, 
        controller: ProjectCustomAttributesController,
        controllerAs: 'vmd'
    };
    return directive;

    function link(scope, element, attrs) {
        scope.vmd.clearFilters = scope.vmd.SetFitlersToDefaultValue;
    }
}

Дырэктыва кантролера:

function DirectiveController($location, dbConnection, uiUtility) {
  vmd.SetFitlersToDefaultValue = SetFitlersToDefaultValue;

function SetFitlersToDefaultValue() {
           //your logic
        }
}

HTML-код:

      
    Clear 
//this button is from parent controller which will call directive controller function
0
дададзена