如何在angularjs中获取指令函数中的当前Controller $ scope?

时间:2016-02-16 05:04:16

标签: javascript angularjs angularjs-directive angularjs-scope angular-ui-router

示例链接:Example

大家好,

我在索引文件中创建了一个全局帮助按钮,基于url am loading动态帮助(html文件),它工作正常。我需要确定哪个控制器被激活,我需要将当前的$ scope作为参数传递给$ scope.HelpFunction函数。$ scope.HelpFunction在help指令中可用。在指令中,我需要从当前控制器获取当前的$ scope.message。基于$ scope,我需要实现一些逻辑,任何人都可以帮助我......

  .directive("help", function($location, $window){
    .directive("help", function($location, $window){
    return {
      restrict: "A",
      template: "<button   ng-click=\"HelpFunction( )\">Help</button>",
      scope: true,
      controller: function($scope){
          $scope.HelpFunction = function( ){
            //Here I need to access current  $scope value
            alert($scope.message)
               //var url =$location.url();
               //$window.open(url+ '.html', '', 'width=700,height=700');
          }
      },
      link: function(scope){

      }
    }
  })
.controller('HomeController', function ($scope, router, $location) {
        $scope.message = "Home";
       $scope.TestFunction = function(data) {
        console.log("Home:" + $location.url())
  };

})
.controller('MainController', function ($scope, router) {
        $scope.message = "Main";
       $scope.TestFunction = function(data) {
        console.log("Main:" + data)
  };

})
 .controller('Page1Controller', function ($scope, router) {
    $scope.message = "Page1";
  $scope.TestFunction = function(data) {
       console.log("Page2:" + data)
  };

})

3 个答案:

答案 0 :(得分:0)

scope: true添加到您的returnig数组中,如下所示

module.directive("help", function($location, $window){
  return {
    restrict: "A",
    scope: true, // Get the scope of the current Controller
    template: "<button style=\"background-color: #f4f4f4;  color: black;\" ng-click=\"HelpFunction(\'section2\')\"  my-target>Help</button>",
    controller: function($scope) {
      $scope.HelpFunction = function(id) {
        var url = $location.url();
        $window.open(url+ '.html', '', 'width=700,height=700');
      }
    }
  }
})

更新:

外部示例http://jsfiddle.net/5gWjY/671/

更新2(根据要求):

外部示例http://jsfiddle.net/5gWjY/673/

答案 1 :(得分:0)

使用单例创建工厂,并在每个控制器中保存当前范围的引用。

factory('currentScope', function(){
   var currentScope = {};

   return currentScope;
})

controller('HomeController', function($scope, currentScope) {
   currentScope = $scope;   
})

controller('MainController', function($scope, currentScope) {
   currentScope = $scope;
})

访问指令中的当前范围。

.directive("help", function($location, $window, currentScope){
    return {
      restrict: "A",
      template: "<button   ng-click=\"HelpFunction( )\">Help</button>",
      scope: true,
      controller: function($scope){
          $scope.HelpFunction = function( ){
            //Here I need to access current  $scope value
            console.log(currentScope);

            alert($scope.message)
               //var url =$location.url();
               //$window.open(url+ '.html', '', 'width=700,height=700');
          }
      },
      link: function(scope){

      }
    }
  })

您必须为视图指定控制器。

$stateProvider.state('Home', {
                url: '/home',
                templateUrl: 'Home.html',
                controller: 'HomeController'
            });

答案 2 :(得分:-1)

要解决此问题,您可以使用serviceservice将在controllers之间共享数据。

plunker上的实例。

创建service

.service('HelpService',function(){
 return {
   message:""
 }
})

directive

.directive("help", function($location, $window) {
return {
  restrict: "A",
  template: "<button   ng-click=\"HelpFunction( )\">Help</button>",
  scope: true,
  controller: function($scope,HelpService) {
    console.log($scope)
    $scope.HelpFunction = function() {
      //Here I need to access current  $scope value
      alert(HelpService.message)
        //var url =$location.url();
        //$window.open(url+ '.html', '', 'width=700,height=700');
    }
  },
  link: function(scope) {

  }
}
})

controller

 .controller('HomeController', function($scope, router, $location,HelpService) {
HelpService.message = "Home";
console.log(HelpService.message)
$scope.TestFunction = function(data) {
  console.log("Home:" + $location.url())
};
})