Javascript AngularJS-从控制器调用特定的指令函数/方法_Javascript_Angularjs_Angularjs Directive

Javascript AngularJS-从控制器调用特定的指令函数/方法

javascript angularjs

Javascript AngularJS-从控制器调用特定的指令函数/方法,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,指令 myApp.directive('vlcControls', function ($compile, $rootScope, $timeout, $window, pictureboxConstants) { var linker = function (scope, element, attrs) { vlcPlayerCustomTemplate = 'some html goes here'; scope.getVLC =

指令

 myApp.directive('vlcControls', function ($compile, $rootScope, $timeout, $window, pictureboxConstants) {


    var linker = function (scope, element, attrs) {


    vlcPlayerCustomTemplate = 'some html goes here';


                scope.getVLC = function (name) {
                    if ($window.document[name]) {
                        return $window.document[name];
                    }
                    if ($window.navigator.appName.indexOf("Microsoft Internet") == -1) {
                        if ($window.document.embeds && $window.document.embeds[name])
                            return $window.document.embeds[name];
                    } else {
                        return $window.document.getElementById(name);
                    }
                }

                scope.doPlayPause = function (vlcPlayer, event) {
                    var vlc = scope.getVLC(vlcPlayer);
                    if (vlc) {

                        if (vlc.playlist.isPlaying) {
                            vlc.playlist.pause();
                            angular.element(event.target).children().removeClass('fa fa-pause font-12');
                            angular.element(event.target).children().addClass('fa fa-play font-12');

                        } else {
                            if (vlc.audio.mute == true) {
                                //do something
                            }
                            vlc.playlist.play();
                        }
                    }
                }

            angular.element(document.querySelector("#controls" + index)).append(element.html(vlcPlayerCustomTemplate));
            $compile(element.contents())(scope);
    };
    return {
        restrict: "E",
        link: linker
    };
});

控制器

myModule.controller('myModuleCtrl', function ($scope, $http, $controller, $compile) {

$compile("<vlc-controls></vlc-controls>")($rootScope);

});

myModule.controller（'mymoduletrl'，函数（$scope，$http，$controller，$compile）{
$compile（“”（$rootScope）；
});

在不使用

vlcPlayerCustomTemplate

html元素或任何

DOM

操作的情况下，仅从

controller

调用特定的

指令

函数/方法

doplaypaise

的最佳方法是什么？

您应该使用

$broadcast

和

$on

来处理来自控制器到指令

对我来说，这是一种代码气味。如果在父范围和指令范围之间共享某些内容，则应该通过绑定来完成。IMO说，如果您必须像这样使用pub-sub模式，那么您应该重新考虑如何使用您的指令

您的指令应该能够执行任何需要执行的操作，而无需直接从父控制器调用。如果需要从父控制器中获取某些内容，则应使用属性或非隔离范围对其进行绑定

一种方法是将

$broadcast

事件从

控制器

发送到

指令

并收听指令

您甚至可以通过它以对象的形式发送参数

$rootScope.$broadcast（'PlayPause'，{}）将在控制器中
在指令中
scope.$on('PlayPause',function(event, data){
      scope.doPlayPause(data.vlcPlayer, data.event)
});

      scope.controllerRef = scope.controllerRef || {};

      angular.extend(scope.controllerRef, {
         doPlayPause: scope.doPlayPause,
         // This is just for an example
         callDirectiveFromController: scope.callDirectiveFromController
      });

控制器：
myApp.controller('MyCtrl', function($rootScope){
  var that = this;

  this.select = function(){
      $rootScope.$broadcast('PlayPause',{vlcPlayer: 'vlcPlayer',event: 'event'});
  }
})

myApp.directive('vlcControls', function ($compile, $rootScope, $timeout, $window, pictureboxConstants) {


    var linker = function (scope, element, attrs) {


                scope.getVLC = function (name) {
                    if ($window.document[name]) {
                        return $window.document[name];
                    }
                    if ($window.navigator.appName.indexOf("Microsoft Internet") == -1) {
                        if ($window.document.embeds && $window.document.embeds[name])
                            return $window.document.embeds[name];
                    } else {
                        return $window.document.getElementById(name);
                    }
                }

                scope.doPlayPause = function (vlcPlayer, event) {
                    var vlc = scope.getVLC(vlcPlayer);
                    if (vlc) {

                        if (vlc.playlist.isPlaying) {
                            vlc.playlist.pause();
                            angular.element(event.target).children().removeClass('fa fa-pause font-12');
                            angular.element(event.target).children().addClass('fa fa-play font-12');

                        } else {
                            if (vlc.audio.mute == true) {
                                //do something
                            }
                            vlc.playlist.play();
                        }
                    }
                }

                 scope.$on('PlayPause',function(event, data){
                    scope.doPlayPause(data.vlcPlayer, data.event)
                });
    };
    return {
myApp.directive('vlcControls', function ($compile, $rootScope, $timeout, $window, pictureboxConstants) {


    var linker = function (scope, element, attrs) {


                scope.getVLC = function (name) {
                    if ($window.document[name]) {
                        return $window.document[name];
                    }
                    if ($window.navigator.appName.indexOf("Microsoft Internet") == -1) {
                        if ($window.document.embeds && $window.document.embeds[name])
                            return $window.document.embeds[name];
                    } else {
                        return $window.document.getElementById(name);
                    }
                }

                scope.doPlayPause = function (vlcPlayer, event) {
                    var vlc = scope.getVLC(vlcPlayer);
                    if (vlc) {

                        if (vlc.playlist.isPlaying) {
                            vlc.playlist.pause();
                            angular.element(event.target).children().removeClass('fa fa-pause font-12');
                            angular.element(event.target).children().addClass('fa fa-play font-12');

                        } else {
                            if (vlc.audio.mute == true) {
                                //do something
                            }
                            vlc.playlist.play();
                        }
                    }
                }

                 scope.$on('PlayPause',function(event, data){
                    scope.doPlayPause(data.vlcPlayer, data.event)
                });
    };
    return {
        restrict: "E",
        link: linker
    };
});      

指令：
myApp.controller('MyCtrl', function($rootScope){
  var that = this;

  this.select = function(){
      $rootScope.$broadcast('PlayPause',{vlcPlayer: 'vlcPlayer',event: 'event'});
  }
})

myApp.directive('vlcControls', function ($compile, $rootScope, $timeout, $window, pictureboxConstants) {


    var linker = function (scope, element, attrs) {


                scope.getVLC = function (name) {
                    if ($window.document[name]) {
                        return $window.document[name];
                    }
                    if ($window.navigator.appName.indexOf("Microsoft Internet") == -1) {
                        if ($window.document.embeds && $window.document.embeds[name])
                            return $window.document.embeds[name];
                    } else {
                        return $window.document.getElementById(name);
                    }
                }

                scope.doPlayPause = function (vlcPlayer, event) {
                    var vlc = scope.getVLC(vlcPlayer);
                    if (vlc) {

                        if (vlc.playlist.isPlaying) {
                            vlc.playlist.pause();
                            angular.element(event.target).children().removeClass('fa fa-pause font-12');
                            angular.element(event.target).children().addClass('fa fa-play font-12');

                        } else {
                            if (vlc.audio.mute == true) {
                                //do something
                            }
                            vlc.playlist.play();
                        }
                    }
                }

                 scope.$on('PlayPause',function(event, data){
                    scope.doPlayPause(data.vlcPlayer, data.event)
                });
    };
    return {
myApp.directive('vlcControls', function ($compile, $rootScope, $timeout, $window, pictureboxConstants) {


    var linker = function (scope, element, attrs) {


                scope.getVLC = function (name) {
                    if ($window.document[name]) {
                        return $window.document[name];
                    }
                    if ($window.navigator.appName.indexOf("Microsoft Internet") == -1) {
                        if ($window.document.embeds && $window.document.embeds[name])
                            return $window.document.embeds[name];
                    } else {
                        return $window.document.getElementById(name);
                    }
                }

                scope.doPlayPause = function (vlcPlayer, event) {
                    var vlc = scope.getVLC(vlcPlayer);
                    if (vlc) {

                        if (vlc.playlist.isPlaying) {
                            vlc.playlist.pause();
                            angular.element(event.target).children().removeClass('fa fa-pause font-12');
                            angular.element(event.target).children().addClass('fa fa-play font-12');

                        } else {
                            if (vlc.audio.mute == true) {
                                //do something
                            }
                            vlc.playlist.play();
                        }
                    }
                }

                 scope.$on('PlayPause',function(event, data){
                    scope.doPlayPause(data.vlcPlayer, data.event)
                });
    };
    return {
        restrict: "E",
        link: linker
    };
});      

另一种方法是使用工厂并在控制器
和指令
之间共享方法
有很多方法可以做到这一点，其中之一是通过广播事件并在指令中收听
然而，我不知道整个环境，也不知道您到底想要实现什么，但看起来设计中存在一个小问题。我想问的问题是“为什么要从父控制器调用指令中的方法？”理想情况下，当您使用指令时，它的功能是自包含的，如果您需要与外部世界进行交互，那么您可以通过变量绑定或（如我所提到的）事件来实现
我确信有一种方法可以完全满足您的要求，但鉴于帖子中的信息，这是不必要的。
您的目标是从控制器调用指令
方法，而无需任何DOM
操作，您可以在隔离范围
的帮助下实现这一点，如下所示
scope: {
           /* This is the reference object passed from the controller */
           controllerRef: '='
       }

您可以在指令中有一个隔离范围
，如下所示
scope: {
           /* This is the reference object passed from the controller */
           controllerRef: '='
       }

然后您可以从控制器
传递相同的信息
$scope.vlcControls = {};

$compile('<vlc-controls controller-ref="vlcControls"></vlc-controls>')($scope);

现在，您已经准备好从控制器调用这些方法中的任何一种，如下所示
$scope.vlcControls.callDirectiveFromController();

检查下面的代码并执行它，它会像您预期的那样正常工作：-）

var myApp=angular.module（'myApp'，[]）；
controller（'mymoduletrl'，函数（$scope、$http、$controller、$compile）{
$scope.vlcControls={}；
$compile（“”）（$scope）；
$scope.vlcControls.callDirectiveFromController（）；
});
myApp.directive（'vlcControls'，function（$compile，$rootScope，$timeout，$window）/，pictureboxConstants）
{
变量链接器=函数（范围、元素、属性）{
scope.getVLC=函数（名称）{
如果（$window.document[名称]）{
返回$window.document[名称]；
}
if（$window.navigator.appName.indexOf（“Microsoft Internet”）=-1）{
if（$window.document.embeddes&&$window.document.embeddes[name]）
返回$window.document.embeddes[name]；
}否则{
返回$window.document.getElementById（名称）；
}
};
scope.doPlayPause=函数（vlcPlayer，事件）{
var vlc=scope.getVLC（vlcPlayer）；
if（vlc）{
if（vlc.播放列表.显示）{
vlc.playlist.pause（）；
angular.element（event.target.children（）.removeClass（'fa-pause font-12'）；
angular.element（event.target）.children（）.addClass（'fa-play font-12'）；
}否则{
如果（vlc.audio.mute==true）{
//做点什么
}
vlc.playlist.play（）；
}
}
};
scope.callDirectiveFromController=函数（）{
log（'我从控制器调用，但在指令内执行：-'）；
};
scope.controllerRef=scope.controllerRef | |{}；
角度扩展（scope.controllerRef{
doPlayPause:scope.doPlayPause，
//这只是一个例子
callDirectiveFromController:scope.callDirectiveFromController
});
};
返回{
限制：“E”，
范围：{
/*这是从控制器传递的引用对象*/
controllerRef:“=”
},
链接：链接器
};
});
引导（文档，['myApp']）

从控制器调用该指令时，会动态设置一些DOM元素。这里的问题是如何从该指令调用特定方法，假设我们不需要DOM操作，只需要函数。因为，doPlayPause
是该指令中的函数，scope.doPlayPause（data.vlcPlayer，data.event）
只调用该函数，scope.doPlayPause（）
没有参数。更新了我添加的指令vlcPlayerCustomTemplate
。我不想要那个HTML，只想从那个指令调用一个函数？如果我调用该指令，它还将附加