2016-10-21 1 views
0

Ich muss auf den Wert von Direktive Controller in meinem Controller zugreifen.

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

// hier ist meine Richtlinie

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

}); 

// hier ctrl

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

Antwort

1

Isolierung Anwendungsbereich ist:

Sie verwenden sollten two-way für die keypoint Bindung erreichen Dies.

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

Was dies tun wird ist , wann immer Sie den Wert in der Richtlinie zu ändern, es in dem Controller spiegelt, und umgekehrt

// 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(){ 
 
\t \t \t \t alert($scope.keypoint) 
 
\t \t \t },500) 
 
    
 
})
<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 

 
    <head> 
 
    <script data-require="[email protected]" 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>

Bitte führen Dieses Snippet

Here is the fiddle

Ohne Umfang Isolierung:

Wenn Sie den Umfang der Controller in der Richtlinie erhalten möchten, nicht den Umfang der Richtlinie isolieren. Wenn Sie den Bereich isolieren, können Sie den Bereich des Controllers nicht abrufen.

// 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(){ 
 
\t alert($scope.keyPoint) 
 
    $scope.$apply(); 
 
},500) 
 
    
 
})
<script data-require="[email protected]" 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

+0

@unknown, führen Sie bitte das Snippet und überprüfen. – Sravan

+0

Ich möchte Schlüsselpunkt als eine Atibute nicht übergeben. Ich möchte nur den Schlüsselpunkt in meinem Hauptcontroller verwenden. – unknown

+0

im Controller meiner Direktive bekomme ich Objekt als Rest Anruf response.so ich möchte dieses Objekt in meinem Hauptcontroller verwenden. – unknown

Verwandte Themen