angularjs带控制器的部分视图(javascript)

时间:2015-05-19 08:02:17

标签: angularjs angularjs-compile

以下代码会像这样创建错误

  

未捕捉错误:[ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=subCtrl&p1=not%20a%20function%2C%20got%20undefined

我该如何解决?

此处的示例代码 http://plnkr.co/edit/i3KmuFd09puvCyfqoX39?p=preview

的index.html

Exception
java.lang.NumberFormatException: For input string: "22.760009765625"

at Java.lang.NumberFormatException.  forInputString(NumberFormatException.java:65)
at java.lang.Integer.parseInt(Integer.java:492)
at java.lang.Integer.parseInt(Integer.java:527)
at com.vaadin.terminal.gwt.client.MouseEventDetails. deSerialize(MouseEventDetails.java:127)
at com.vaadin.ui.Button.changeVariables(Button.java:217)
at com.vaadin.terminal.gwt.server.AbstractCommunicationManager. changeVariables(AbstractCommunicationManager.java:1451)
at com.vaadin.terminal.gwt.server.AbstractCommunicationManager. handleVariableBurst(AbstractCommunicationManager.java:1399)
at com.vaadin.terminal.gwt.server.AbstractCommunicationManager. handleVariables(AbstractCommunicationManager.java:1318)
at com.vaadin.terminal.gwt.server.AbstractCommunicationManager. doHandleUidlRequest(AbstractCommunicationManager.java:763)
at com.vaadin.terminal.gwt.server.PortletCommunicationManager. handleUidlRequest(PortletCommunicationManager.java:242)
at com.vaadin.terminal.gwt.server.AbstractApplicationPortlet. handleRequest(AbstractApplicationPortlet.java:465)....

sub.html

  var myapp = angular.module("myapp",[]);
  myapp.controller( "mainCtrl" , ["$scope","$compile",function($scope,$compile){
    var p = $scope;
    p.getSub = function() {
      var url = "sub.html";
      $.ajax({url:url,success:function(html) {
                    $("#content").html(html);
                    $compile(html)($scope);
      }});
    }
  }]);


<body ng-controller="mainCtrl">
    <button ng-click="getSub()">getSub</button>
    <div id="content">
       sub.html
    </div>
</body>

2 个答案:

答案 0 :(得分:0)

问题出在嵌套控制器中。所以你使用$ main的“main”控制器,并在下一次你在同一个html中包含嵌套控制器。
所以解决方案是: $.ajax({url:url,success:function(html) { $("#content").html(html); $compile(html)($scope); alert("subCtrl created"); }});
并在sub.html:
$.ajax({url:url,success:function(html) { $("#content").html(html); $compile(html)($scope); alert("subCtrl created"); }});

祝你好运。

答案 1 :(得分:0)

HTML中的

<body ng-controller="mainCtrl">
  <button ng-click="getSub()">getSub</button>
  <div ng-if="showSub">
    <div ng-include="{{mySub}}.html"></div>
  </div>
</body>

你的控制器:

myapp.controller( "mainCtrl" , ["$scope",function($scope){
  $scope.showSub = false;
  $scope.mySub = '';
  $scope.getSub = function(){
    $scope.mySub = "sub";  // change this to include other files
    $scope.showSub = true;
  };
}]);