带有控制器的指令内部的角度监视？
[英]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.