컨트롤러 외부의 ng-model

ng-controller 요소 외부의 뷰를 편집하려고합니다. $rootScope 및 dom 조작을 사용하여 문제를 해결할 수 있었지만 고유 한 각도 정보로 어떻게 해결할 수 있는지 알고 싶습니다.컨트롤러 외부의 ng-model

HTML :

<body> 
    <div class="container"> 
     <div class="block" ng-controller="BlockController as block"> 
      <div><strong>Name:</strong> {{ block.name }}</div> 
      <a href ng-click="block.edit()">Edit</a> 
     </div> 
    </div> 


    <div class="container-editor"> 
     <div id="block-editor"></div> 
    </div> 
    </body>

JS :

여기

angular.module('app', []) 

    .controller('BlockController', BlockController); 

    function BlockController($compile, $scope) 
    { 
     this.name = 'default name'; 

     this.edit = function() { 
      var $editor_html = ' <input type="text" ng-model="block.name" name="name" /> <a href ng-click="block.save()">Save</a>'; 

      $editor_html = $compile($editor_html)($scope); 
      angular.element(document.querySelector("#block-editor")).html('').append($editor_html); 
     }; 

     this.save = function() { 
      // save block 
      angular.element(document.querySelector("#block-editor")).html(''); 
     }; 

    }

plnkr

예에게 있습니다

출처

2014-12-15 Webeith

으로 여러 지시를 전달할 수 컨트롤러 내에서 편집 입력 태그를 유지에 문제가 있습니다 ? – aa333

Angular 애플리케이션에 여러 스코프를 만들 수 있다는 것을 알고 계셨습니까? 그런 다음 각자에게 자체 제어기를 제공하여 "각도 방법"을 구현할 수 있습니다. – Blazemonger

감사. @Blazemonger는 여러 범위의 예제를 보여줄 수 있습니까? – Webeith

더 각 방법은? 지시문 만 사용하십시오. 기본적으로 자식 지시문 안에 부모 지시문의 컨트롤러 *를 가져올 수 있습니다. 상위 컨트롤러를 하위/하위에 대한 API로 처리하십시오.

.directive('parent', function() { 
    return { 
    controller: function() { 
     this.catchChild = function(child) { 
      // code... 
     }; 
    } 
    }; 
}) 
.directive('child', function() { 
    return { 
    require: '^parent', 
    link: function($scope, $element, $attrs, parentController) { 
     $scope.jump = function() { 
     // I'm jumping... 
     parentController.catch($scope); 
     }; 
    } 
    }; 
})

나는 당신을 위해 plnkr 업데이트 : 이 http://plnkr.co/edit/qRURHRMWt9K5acLWmCHv?p=preview

(*) 당신은 배열

angular.module('app', []) 
.directive('parent1', function() { 
    return { 
     controller: function() { 
      this.fn1 = function(child) { 
       // code... 
      }; 
     } 
    }; 
}) 
.directive('parent2', function() { 
    return { 
     controller: function() { 
      this.fn2 = function(child) { 
       // code... 
      }; 
     } 
    }; 
}) 
.directive('child', function() { 
    return { 
     require: ['^parent1', '^parent2'], 
     link: function($scope, $element, $attrs, controllers) { 
      var parent1Controller = controllers[0]; 
      var parent2Controller = controllers[1]; 
      parent1Controller.fn1(); 
      parent2Controller.fn2(); 
     } 
    }; 
})

출처

2014-12-16 23:37:21 hinok

답변

관련 문제