如何在控制器内部访问指令的控制器$ scope属性

Question

I have to access value from directive's controller inside my controller. 我必须从控制器内部的指令控制器访问值。

<div ng-controller="myCtrl">
      <my-directive atr="xyz"></my-directive>
    </div>

//here is my directive //这是我的指令

app.directive('myDirective',function() {
return {
 restrict : 'E',
 replace : false,
 scope :{
 atr :'@'
},
 controller : function($scope) {
  console.log($scope.atr); //xyz
 $scope.keyPoint ="this is what i want to access inside myCtrl";
 }
}

});

//here is ctrl //这里是ctrl

app.controller('myCtrl',function($scope){
//how can I access keyPoint here
})

Answer 1

Isolating scope: 隔离范围：

You Should use two-way binding for the keypoint to achieve this. 您应该对关键点使用two-way绑定来实现此目的。

scope :{
    atr :'@',
    keyPoint: '='
    },

What this will do is when ever you change the value in Directive, it reflects in your Controller , and vice-versa 这将是在您更改Directive中的值时，它会反映在Controller中 ，反之亦然

 // Instantiate the app, the 'myApp' parameter must // match what is in ng-app var myApp = angular.module('myApp', []); // Create the controller, the 'ToddlerCtrl' parameter // must match an ng-controller directive myApp.directive('myDirective',function() { return { restrict : 'E', replace : false, scope :{ atr :'@', keyPoint: '=' }, controller : function($scope) { console.log($scope.atr); //xyz $scope.keyPoint ="this is what i want to access inside myCtrl"; } } }); myApp.controller('myCtrl',function($scope,$timeout){ $timeout(function(){ alert($scope.keypoint) },500) })

 <!DOCTYPE html> <html ng-app="myApp"> <head> <script data-require="angular.js@1.2.7" data-semver="1.2.7" src="http://code.angularjs.org/1.2.7/angular.js"></script> <link href="style.css" rel="stylesheet" /> <script src="script.js"></script> </head> <body> <h1>Starter AngularJS app</h1> <div ng-controller="myCtrl"> <my-directive atr="xyz" key-point="keypoint"></my-directive> </div> {{keypoint}} </body> </html>

Please run this snippet 请运行此代码段

Here is the fiddle 这是小提琴

Without Isolating scope: 没有隔离范围：

If you want to get the scope of the controller in the directive, dont Isolate the scope in the directive. 如果要在指令中获取控制器的作用域，请不要在指令中隔离作用域。 If you Isolate the scope, you cannot get controller's scope. 如果隔离范围，则无法获得控制器的范围。

 // Instantiate the app, the 'myApp' parameter must // match what is in ng-app var myApp = angular.module('myApp', []); // Create the controller, the 'ToddlerCtrl' parameter // must match an ng-controller directive myApp.directive('myDirective',function() { return { restrict : 'E', replace : false, controller : function($scope) { console.log($scope.atr); //xyz $scope.keyPoint ="this is what i want to access inside myCtrl"; } } }); myApp.controller('myCtrl',function($scope,$timeout){ $scope.atr="xyz" $timeout(function(){ alert($scope.keyPoint) $scope.$apply(); },500) })

 <script data-require="angular.js@1.2.7" data-semver="1.2.7" src="http://code.angularjs.org/1.2.7/angular.js"></script> <link href="style.css" rel="stylesheet" /> <script src="script.js"></script> <body ng-app="myApp"> <h1>Starter AngularJS app</h1> <div ng-controller="myCtrl"> <my-directive ></my-directive> <h1>{{keyPoint}}</h1> </div> </body>

Fiddle for second snippet 提琴第二段

如何在控制器内部访问指令的控制器$ scope属性

问题描述

1 个解决方案

解决方案1
1 2016-10-21 06:57:47

如何在控制器内部访问指令的控制器$ scope属性

问题描述

1 个解决方案

解决方案1 1 2016-10-21 06:57:47

解决方案1
1 2016-10-21 06:57:47