AngularJS控制器无法使用$ scope访问部分数据

时间:2014-11-20 12:38:30

标签: javascript jquery angularjs

我是AngularJS的新手,并且有使用TABS的情况,我来到了以下网址并在我的网站中实现

Tabs link

只有我用上面的链接实现的标签中的更改是我的标签数据从服务器加载为部分数据并且没有嵌入HTML本身

最初,当我的页面加载时,它会渲染

<div id="tabs" ng-controller="TabsCtrl" >
     //MANY HTML ELEMENTS ARE THERE HERE
     //SOME LINK
</div>

app.controller('TabsCtrl', function ($scope,$http,$location,$window,$routeParams) {

   //Below Function is loaded here but actual testConnectivity() button  
   //is present in partials that is going to load in "userSetupTab.html"
   $scope.testConnectivity = function() {
        alert("TEST "+JSON.stringify($scope.userSetupForm));
   };

      //I AM checking here, if TABS LINK is clicked then it calls  
       `url: 'partials/userSetupTab.html'` 
});

userSetupTab.html

<form name="userSetupForm" novalidate>
  <table  border="0" width="100%" cellpadding="2" cellspacing="2">
    <tr>
                <td>
                    <label class="avLogin-Label" title="Specifies the IP address of the SIP trunk ethernet connection." >PABX IP Address:</label>
                </td>
                <td align="left" colspan="0" >
                    <input class="form-control" title="Specifies the IP address of the SIP trunk ethernet connection." placeholder="xxx.xxx.xxx.xxx"  
                        style="display: inline-block;display:block;white-space: nowrap;overflow: hidden;" type="text" 
                        name="pabxipaddress" id="pabxipaddress" ng-model="userSetup.pabxipaddress" required ng-pattern='pattern' >
                </td>
                <td>
                    <span class="error" ng-show="(testIPOfficeFlag || submitted) && userSetupForm.pabxipaddress.$error.required"><label style="color: red;">Required!</label></span>
                    <span class="error" ng-show='(testIPOfficeFlag || submitted) && userSetupForm.pabxipaddress.$error.pattern'><label style="color: red;">Invalid IP Address!</label></span>
                </td>
                <td align="center">
                    <input type="button" ng-click="testConnectivity()" class="btn btn-primary" value="Test Connection">
                </td>
        </tr>
  </table>
</form>

为什么testConnectivity()函数会给我发送未定义的警报? 是因为<form name="userSetupForm">稍后加载并且首先加载了js文件,我的意思是说通过TABS url动态地将表单添加到控制器,这是控制器函数$ scope不知道userSetupForm。

实际需要

<form>
<ip field> <port field> <userid field> <password field> <test connectivity button>
<first name field>
<last name field>
<submit button>
</form>

我的表单与上面相同,并且在所有字段上都进行了验证,但在提交表单之前,如果用户想要尝试,则只需输入<ip field> <port field> <userid field> <password field>并且我不想验证整个表单当时只想验证4个字段,这就是为什么我首先考虑访问$scope.userSetup.pabxipaddress.$valid()然后我收到错误"Cannot read property '$valid' of undefined"

仅当我在js文件中声明如下

时才有效
 $scope.userSetup= { pabxipaddress: ''}

0 个答案:

没有答案