如何在Angular中從控制器訪問范圍到自定義指令？
[英]How to access scope from controller to custom directive in Angular?
問題描述
我現在正在學習Angular，我正在上指導課。 我正在為自己做一些運動，但我有一個問題。
我創建了一個客戶指令，我想要的是用戶將在文本框中輸入任何文本，然后輸入中的文本將顯示在我的自定義指令中。
右弓我仍然沒有得到它。
這是我的一些代碼：
<body ng-app="myApp">
<div class="container" ng-controller="MainCtrl">
<h3>Directive</h3>
<div class="form-group">
<label>Type text: </label>
<input type="text" class="form-control" ng-model="greet_value" />
<p>Value <div flx-greet-me></div></p>
</div>
</div>
</body>
我的指示：
var myApp = angular.module('myApp',[]);
myApp.controller('MainCtrl', function(){
//some codes here
})
.directive('flxGreetMe', function() {
var html_template = '<h1>' + $scope.greet_value + '</h1>';
return {
replace: true,
restrict: 'AE',
scope: true,
template: html_template
}
});
你能幫幫我嗎？ 我仍然是Angular的新人。
這是plnkr：
4 個解決方案
解決方案1
1 已采納 2015-06-26 03:29:30
你的問題不明確，在這里：
scope: true,
這樣做是將此指令范圍與其他所有內容隔離開來。 你可以刪除它然后執行此操作：
return {
replace: true,
restrict: 'AE',
template: html_template,
controller : function($scope) {
$scope.$watch("greet_value", function(greet_value) {
// whatever you like
});
}
}
或者您可以保留它並手動訪問父作用域，如下所示：
return {
replace: true,
restrict: 'AE',
template: html_template,
scope: true,
controller : function($scope) {
$scope.$parent.$watch("greet_value", function(greet_value) {
// whatever you like
});
}
}
或者你可以通過寫這樣的視圖使其更靈活：
<p>Value <div flx-greet-me="greet_value"></div></p>
接着
return {
replace: true,
restrict: 'AE',
template: html_template,
scope: true,
controller : function($attrs) {
$attrs.flxGreetMe.$observe(function(arg_value) {
// whatever you like
});
}
}
（此代碼均未經過測試。）
解決方案2
1 2015-06-26 03:46:48
您也可以使用隔離范圍並在范圍內使用'='，它在您的指令中為您提供雙向綁定，如下所示
<input type="text" ng-model="val"/>
<p value="val"></p>
return {
replace: true,
transclue: true,
scope:{
value = "="
},
template : "<div>value</div>"
解決方案3
1 2015-06-26 04:12:23
實現任務的最簡單方法是
HTML
<p><input type="text" ng-model="inputValue" ng-keyup="setDirectiveValue(inputValue)"></p>
<p><div my-directive></div></p>
<script src="libs/angular-1.3.15/angular.min.js"></script>
<script src="scripts/ctrlToDirectiveApp.js"></script>
ctrlToDirectiveApp
var myApp = angular.module("ctrlToDirective",[]);
myApp.controller("myCtrl", function($sce, $window, $scope){
$scope.myDirectiveValue = "";
$scope.setDirectiveValue = function(directiveValue){
console.log(directiveValue);
$scope.$watch(function(){
$scope.myDirectiveValue = directiveValue;
})
console.log($scope.myDirectiveValue);
};
})
myApp.directive("myDirective",function(){
return {
restrict: 'AE',
template : "Hello {{myDirectiveValue}}"
};
解決方案4
0 2015-06-26 05:25:40
那么你可以使用隔離范圍的雙向數據綁定來實現相同的功能。
JS：
myApp.controller('MainCtrl', function($scope){
//some codes here
$scope.greet_value = "Please change text"
})
.directive("flxGreetMe", function() {
return {
replace: true,
restrict: 'AE',
scope : {test : "="},
template: '<h1>{{test}}</h1>'
}
});
HTML：
<div flx-greet-me test="greet_value" >
</div>
這是掠奪者
如何從帶有參數的指令調用角度控制器范圍函數？
[英]How to call angular controller scope function from directive with parameters?
如何從ng-repeat中的指令訪問控制器范圍？
[英]How to access to the controller scope from a directive inside ng-repeat?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.