帶有控制器的指令內部的角度監視？
[英]angular watch inside of a directive with out controller?
問題描述
我在將$ scope.modalClick綁定到scope.modalClick時遇到麻煩，我認為使用scope：{modalClick：“ =”}可以解決，但不能解決。 我該如何做兩種方式從子范圍（ scope ）綁定到父范圍（ $ scope ）。
這是我的標記
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-animate/angular-animate.min.js"></script>
<script src="js/modal.js"></script>
<style>
.btn { width:200px; height:30px; background-color:rgb(30, 50, 100); color:white; line-height:30px; text-align:center; }
.btn:hover { background-color:#005cab; cursor:pointer; cursor:hand; }
.modal-window-directive { width:100%; height:300px; background-color:orange; background-color:rgba(20, 20, 20, .5); }
</style>
</head>
<body>
<div modal-click="partials/form.html" modal-id="modform" bgcolor="rgb(10, 10, 10, .5)" width="400" height="200"class="btn">click me</div>
</body>
</html>
這是我的Javascript
if(typeof qs === "undefined"){
window.qs = function(arg){ return document.querySelector(arg); };
}
var app = angular.module("modal", ["ngAnimate"]);
app.run(function($rootScope){
console.log($rootScope);
});
angular.element(document).ready(function(){
angular.bootstrap(document.querySelector("html"), ["modal"]);
});
function AppCtrl ($scope){
$scope.setSource = function(src){
}
$scope.closeModal = function(){
}
$scope.openModal = function(){
}
}
app.directive("modalClick", function($compile, $document){
return {
restrict:"A",
scope:{
modalClick:"@",
modalId:"@",
bgcolor:"@",
width:"@",
height:"@"
},
controller:"AppCtrl",
link:function(scope, element, attr, ctrl){
var modalElement = angular.element("<div class='modal-window-directive' style='position:absolute; top:0; bottom:0; left:0; right:0; width:100%; height:100%;'></div>");
var modal = angular.element("<div class='modal-window-frame' ng-include='modalClick'></div>");
angular.element(document.body).append(modalElement);
if(scope.bgcolor){
modalElement.css({backgroundColor:scope.bgcolor});
} else {
modalElement.css({backgroundColor:});
}
modalElement.append(modal);
$compile(modal)(scope);
scope.modalActive = false;
scope.$watch("modalActive", function(newVal){
if(newVal){
console.log("newVal :" + newVal);
}
})
scope.toggle = function(){
scope.$apply(function(){
scope.modalActive = !scope.modalActive;
})
}
element.bind("click", function(e){
scope.toggle();
})
}
}
});
我知道有辦法做到。 我是否錯過了我的研究范圍？ 我是否必須在html中找到它？ 我不確定如何解決這一問題，任何人都可以幫忙或指出正確的方向嗎？ 我應該對角度元素使用$ compile嗎？
1 個解決方案
解決方案1
1 2014-05-09 21:56:28
為了綁定到父作用域的屬性，您需要將其作為屬性的值傳遞，並在隔離作用域中進行雙向數據綁定。 現在，您沒有將屬性作為屬性值傳遞。
此外，在指令中不需要控制器來綁定到父作用域。
最后，是的，您需要$compile該元素，以使其成為“ Angular-aware”（例如，使ngInclude生效）。
HTML：
<div modal-click template-url="modalClick" class="btn">click me</div>
控制器：
function AppCtrl ($scope){
...
$scope.modalClick = 'partial/form.html';
...
指示：
app.directive("modalClick", function($compile, $document){
return {
restrict: 'A',
scope:{
templateUrl: '='
},
link:function(scope, element, attr){
/* Now `scope.templateUrl` is 2-way bound
* to parent scope's `modalClick` property */
var modalElement = angular.element('<div class="modal-window-directive"><div class="modal-container-element" ng-include="templateUrl"></div></div>');
$document.find('body').append(modalElement);
$compile(modalElement)(scope);
}
};
});
如何在“ controller as”控制器內的指令中正確使用$ watch？
[英]How to properly use $watch in a directive inside a “controller as” controller?
選擇的Angular指令不會為Controller As觸發$ watch
[英]Chosen Angular directive doesn't fire $watch for Controller As
角度：控制器和指令之間的共享數據。 $ watch如何運作
[英]Angular: sharedata between controller and directive. How $watch works
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.