2014-10-30 4 views
0

저는 컨트롤러가 포함 된 간단한 ASP.NET MVC 응용 프로그램이 있습니다. 부분보기를 사용하여이 컨트롤러 내부에 필요한 경우에만 다른 ng 컨트롤러를 삽입합니다. 바인딩을 제대로 만들 수 없기 때문에 어떻게 작동시킬 수 있습니까? 여기 내가 필요한 항목의 단순화 된 버전으로 plunker이 있습니다. 중첩 된 컨트롤러를 동적으로 삽입하십시오.

<body ng-app="MyApp"> 
    <div id='parent' ng-controller="MyCtrl"> 
    <label>Primitive</label> 
    <input type="text" ng-model="name"> 

    <label>Object</label> 
    <input type="text" ng-model="user.name"> 

    <button onclick="addNested();">Add Nested Controller</button> 
    </div> 
</body> 

그리고 자바 스크립트 부분 :

var app = angular.module("MyApp", []); 

app.controller("MyCtrl", function($scope) { 
    $scope.name = "ParentName"; 
    $scope.user = { 
    name: "Peter" 
    }; 
}); 

function addNested() { 
    $('#parent').append(
     '<div class="nested" ng-controller="MyNestedCtrl">'+ 
       '<label>Primitive</label>' + 
       '<input type="text" ng-model="name"><br />' + 

       '<label>Primitive with explicit $parent reference</label> <br />' + 
       '<input type="text" ng-model="$parent.name">' + 

       '<label>Object</label>' + 
       '<input type="text" ng-model="user.name">' + 
      '</div>' + 
      '<script type="text/javascript">' + 
       'var a = angular.module("MyApp");' + 
       'a.controller("MyNestedCtrl", ["$scope", MyNestedCtrl]);' + 
      '</script>'); 
} 

function MyNestedCtrl($scope) 
{ 
    $scope.name = "ChildName"; 
    $scope.user = { 
    name: "Paul" 
    }; 
} 

답변

1

, 당신은 당신이 그렇게했다고 각도 알려야합니다. 특히 $compile 서비스를 사용하여 HTML 템플릿을 특정 범위와 연결하여 바인딩을 "실시간"으로 만듭니다. 컨트롤러가 아닌 지시문에서 이런 종류의 작업을 수행하는 것이 바람직하지만 데모 용으로는 이렇게됩니다.

플런커 : http://plnkr.co/edit/RmYYynlHKEoQWVbELYDP?p=preview

1

당신이 jQuery를 작성하지 AngularJS와. 각도에서 HTML보기가 있어야하며 코드에서 경로 (ng-router 사용) 또는 상태 (ui-router 사용)를 호출하여 tempalte를 대체해야합니다. 귀하의 HTML 코드는 하나 2의 장소에있을 수 있습니다 다음 templateUrl: 속성을 참조 할 것입니다 외부 HTML 템플릿 파일에 tempalte:
2)에서

1) 상태로 정의한다.

템플릿은 ng-view 속성이있는 태그의 내용을 대체합니다. 당신이 당신의 버튼을 숨기려면 그래서되어야합니다 : 사용자가 수동으로 HTML의 비트를 삽입하려면

<div ng-view> 
     <button> button goes here </button> 
    </div> 
관련 문제