让我说我有这样的事情:
<div ng-app="myApp">
<div ng-controller="myCtrl">
{{foo}}
<button ng-click="bindToMe" />
</div>
<div ng-controller="anotherCtrl">
{{foo}}
<button ng-click="noBindToMeInstead" />
</div>
</div>
<!-- yes its outside of ng-app -->
<div id="tempZone">
<input type="text" ng-model="foo" />
</div>
我想要做的是使用#tempZone
编译/数据绑定,就像它是特定范围的一部分一样。
类似的东西:
var myApp = angular.module('myApp');
myApp.controller('myCtrl', function($scope){
$scope.foo = "init1";
$scope.bindToMe = function(){
var tempZone = document.getElementById('tempZone');
$scope.$MAGICBINDMETHOD(tempZone);
};
});
myApp.controller('anotherCtrl', function($scope){
$scope.foo = "init2";
$scope.noBindToMeInstead = function(){
var tempZone = document.getElementById('tempZone');
$scope.$MAGICBINDMETHOD(tempZone);
};
});
我想这样,所以我可以编写一个模态窗口服务,允许加载的模板与调用模态的作用域交互。到目前为止,我没有看到这个工作的例子。是否可以将dom元素绑定到范围?
答案 0 :(得分:4)
显然答案非常简单。
$scope.$MAGICBINDMETHOD(tempZone);
只是
$compile(tempZone)($scope);
及其完成。
答案 1 :(得分:2)
我会为您的公共tempZone
使用控制器和范围,使用服务进行数据共享(用于输入),并从一个控制器发出'bindToMe'事件,以通知另一个控制器停止倾听变化。
中的某些内容
<div ng-app="myApp">
<div ng-controller="myCtrl">
{{foo}}
<button ng-click="bindToMe()" />
</div>
<div ng-controller="anotherCtrl">
{{foo}}
<button ng-click="bindToMe()" />
</div>
<!-- no its not outside of ng-app -->
<div id="tempZone" ng-controller="tempZoneCtrl">
<input type="text" ng-model="myService.foo" />
</div>
</div>
和控制器:
angular.module('myApp')
.controller('myCtrl', function($scope, myService){
$scope.foo = "init1";
$scope.$root.$on("bindToMe", function(event) {
if (event.target != $scope) releaseBinding();
};
$scope.bindToMe = function(){
$scope.$emit("bindToMe");
};
})
.controller('anotherCtrl', function($scope, myService){
$scope.foo = "init2";
$scope.$root.$on("bindToMe", function(event) {
if (event.target != $scope) releaseBinding();
};
$scope.bindToMe = function(){
$scope.$emit("bindToMe");
};
})
.controller('tempZoneCtrl', function($scope, myService){
$scope.$watch('foo', function(newV) { myService.foo = newV; });
})
.service('myService', function() {
return {};
});
你的模态将独立于任何其他绑定值的控制器,它只依赖于单例服务(实际上是数据传递的正确工具)。
另外,您需要检查angular-ui的$ dialog provider(http://angular-ui.github.io/bootstrap/#/dialog)。他们正在重写twitter-bootstrap javascript以使其具有角度友好性。