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

时间:2016-10-21 06:51:43

标签: javascript angularjs angularjs-directive

我必须从控制器内的指令控制器访问值。

@Entity
@Table
@SecondaryTable(name = "a_summary_view", 
       pkJoinColumns = {@PrimaryKeyJoinColumn(name = "id", referencedColumnName= "id")})
public class A{

   @Column(table = "a_summary_view")
   private Integer bCount;

   @Column(table = "a_summary_view")
   private BigDecimal bTotal;

   @Column(table = "a_summary_view")
   private Date lastBDate;
}

//这是我的指示

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

//这里是ctrl

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";
 }
}

});

1 个答案:

答案 0 :(得分:1)

隔离范围:

您应该对关键点使用two-way绑定来实现此目的。

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

当你更改指令中的值时,它会做什么,它会在你的控制器中反映,反之亦然

&#13;
&#13;
// 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)
   
})
&#13;
<!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>
&#13;
&#13;
&#13;

请运行此代码段

Here is the fiddle

没有隔离范围:

如果要在指令中获取控制器的范围,请不要在指令中隔离范围。 如果隔离范围,则无法获得控制器的范围。

&#13;
&#13;
// 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)
   
})
&#13;
<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>
&#13;
&#13;
&#13;

Fiddle for second snippet

相关问题