2

假设我有这样的事情：

<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 元素绑定到范围？

4

2 回答 2

4

显然，答案非常简单。

 $scope.$MAGICBINDMETHOD(tempZone);

只是

 $compile(tempZone)($scope);

并完成。

于 2013-06-10T19:03:56.130 回答
2

我会为您的 common 使用控制器和范围tempZone，使用数据共享服务（用于输入），并从一个控制器 $emit '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 提供程序（http://angular-ui.github.io/bootstrap/#/dialog）。他们正在重写 twitter-bootstrap javascript 以使其对角度友好。

于 2013-06-04T23:16:03.367 回答