角度代码没有看到控制器

时间:2014-12-31 18:28:08

标签: angularjs angularjs-ng-click ng-class

我对Angular有些新意,所以这可能是我不知道的事情,但是......

我有一个包含三个主要部分的页面:顶部,中部,底部。顶部的导航按钮调用JS函数,这些函数使用$ .ajax()来查找页面,然后填充中间部分。但是,包含文件中的角度参考不起作用。它无法看到控制器。 ng控制器在body标签上,但我也把它放在包含文件中的div上以防万一,但无济于事。

角度代码是否因为它是在主页面之后加载而不知道控制器?

如何让包含文件中的角度代码生效?我特意使用ng-click和ng-controller,但我也尝试从控制器内输出一个变量,它只是将{{nav.sidelink}}输出到屏幕上。

app.js:

(function(){

var app = angular.module('vetSite', []);

app.controller('NavController', function(){

    var subtab = 1;
    var sidelink = 1;

    this.setTab = function(st){
        this.tab = st;
    }

    this.isSet = function(ct){
        return this.tab === ct;
    }

    this.setSubTab = function(st){
        this.subtab = st;
    }

    this.isSetSub = function(ct){
        return this.subtab === ct;
    }

    this.setSideLink = function(sl){
        this.sidelink = sl;
    }

    this.isSetSideLink = function(cl){
        return this.sidelink === cl;
    }

});

})();

包含文件的HTML:

<div id="subcontent">
    <div ng-show="nav.isSetSideLink(1)">
    Prairie has quality machines in our laboratory that can give us blood cell counts, electrolytes, and blood chemistry to check internal organs.  This enables us to diagnose and treat patients rapidly, and to monitor response to treatment without waiting 24 hours for the bloodwork to come back from an outside laboratory.  Having this information can make a huge difference in our success. 
    </div>

    <div ng-show="nav.isSetSideLink(2)">
    Being able to evaluate joint fluid for infection allows us to make a diagnosis and start treatment rapidly, increasing the chances of a positive outcome.
    </div>

    <div ng-show="nav.isSetSideLink(3)">
    Real time evaluation of abdominal fluid can help with the diagnosis of colic.  Increases in white blood cells and changes in abdominal fluid  chemistries can indicate that the gut is becoming damaged.  Getting these horses to colic surgery more quickly can result in a better outcome.
    </div>

    <div ng-show="nav.isSetSideLink(4)">
     Running cultures in house enables us to know what type of bacteria is involved in an infection within 24-48 hours of an examination and can help direct treatment.  Obtaining an antibiotic sensitivity for that bacteria rapidly improves the chances for a quick, full recovery.  Sending cultures to an outside laboratory delays this information 36-48 hours.  
    </div>

</div>

<div id="subsidenav">
    <div class="side_subnavbutton" ng-class="{ side_navbutton_selected:nav.isSetSideLink(1) }"><a href ng-click="nav.setSideLink(1);">In-House Blood Analysis</a></div>

    <div class="side_subnavbutton" ng-class="{ side_navbutton_selected:nav.isSetSideLink(2) }"><a href="javascript:;" ng-click="nav.setSideLink(2);">In-House Joint Fluid Analysis</a></div>

    <div class="side_subnavbutton" ng-class="{ side_navbutton_selected:nav.isSetSideLink(3) }"><a href ng-click="nav.setSideLink(3);">In-House Abdominal Fluid Analysis</a></div>

    <div class="side_subnavbutton" ng-class="{ side_navbutton_selected:nav.isSetSideLink(4) }"><a href ng-click="nav.setSideLink(4);">In-House Cultures</a></div>
</div>  

它完全忽略了对nav的所有引用。所有四个段落都显示出来,并且没有任何链接正在改变类(尽管nav.sidelink被初始化)

如何让它看到控制器?

感谢。

编辑:一些可能重要的信息:

这是最初加载的页面:

<html ng-app="vetSite">

<head>
<title>Welcome!</title>
<link rel="stylesheet" href="/css/style.css" type="text/css" media="all">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script language="javascript1.2" src="/js/angular.min.js"></script>
<script language="javascript1.2" src="/js/app.js"></script>
<script language="javascript1.2" src="/js/divs.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body ng-controller = "NavController as nav">

<div id="top_area">
<div id="header">
    <img src="/images/headerlogo.gif" align="left" />
    <img src = "/images/mastheads/fronthall_clearMH.jpg" align="right" />   <br clear="all"/>

    <div>
        <div class="buttondiv" style="left:50%;" ng-class="{ buttondiv_selected:nav.isSet(1) }"><a href="javascript:load_content('home');" ng-click="nav.setTab(1);">HOME</a></div>
        <div class="buttondiv" ng-class="{ buttondiv_selected:nav.isSet(2) }"><a href="javascript:load_content('staff');" ng-click="nav.setTab(2);">STAFF</a></div>
        <div class="buttondiv" ng-class="{ buttondiv_selected:nav.isSet(3) }"><a href="javascript:load_content('services');" ng-click="nav.setTab(3); nav.setSubTab(1);">SERVICES</a></div>
        <div class="buttondiv" ng-class="{ buttondiv_selected:nav.isSet(4) }"><a href="javascript:load_content('facility');" ng-click="nav.setTab(4); nav.setSubTab(1);">FACILITY</a></div>
        <div class="buttondiv" ng-class="{ buttondiv_selected:nav.isSet(5) }"><a href="javascript:load_content('location');" ng-click="nav.setTab(5);">LOCATION</a></div>
        <div class="buttondiv" ng-class="{ buttondiv_selected:nav.isSet(6) }"><a href="javascript:load_content('contact');" ng-click="nav.setTab(6);">CONTACT</a></div>
        <div class="buttondiv" ng-class="{ buttondiv_selected:nav.isSet(7) }"><a href="javascript:load_content('job');" ng-click="nav.setTab(7);">CAREER</a></div>
    </div>

    <br/>
    <br clear="all"/>

    <div id="separatordiv">&nbsp;</div>     

</div>
</div>

<div id="middle_area">

<br clear="all" />

<div id="subnav" ng-show="nav.isSet(3);" style="margin-left: 20px;">
<div class="subbuttondiv" ng-class="{ subbuttondiv_selected:nav.isSetSub(1) }"><a href="javascript:load_subcontent('medicine');" ng-click="nav.setSubTab(1);">Sports<br/>Medicine</a></div><div class="subbuttondiv" ng-class="{ subbuttondiv_selected:nav.isSetSub(2) }"><a href="javascript:load_subcontent('surgery');" ng-click="nav.setSubTab(2);">Surgery</a></div><div class="subbuttondiv" ng-class="{ subbuttondiv_selected:nav.isSetSub(3) }"><a href="javascript:load_subcontent('imaging');" ng-click="nav.setSubTab(3);">Diagnostic<br/>Imaging</a></div><div class="subbuttondiv" ng-class="{ subbuttondiv_selected:nav.isSetSub(4) }"><a href="javascript:load_subcontent('labserv');" ng-click="nav.setSubTab(4);">Laboratory<br/>Services</a></div><div class="subbuttondiv" ng-class="{ subbuttondiv_selected:nav.isSetSub(5) }"><a href="javascript:load_subcontent('rep');" ng-click="nav.setSubTab(5);">Reproduction</a></div><div class="subbuttondiv" ng-class="{ subbuttondiv_selected:nav.isSetSub(6) }"><a href="javascript:load_subcontent('dent');" ng-click="nav.setSubTab(6);">Dentistry</a></div><div class="subbuttondiv" ng-class="{ subbuttondiv_selected:nav.isSetSub(7) }"><a href="javascript:load_subcontent('comp');" ng-click="nav.setSubTab(7);">Complementary<br/>Medicine</a></div>  

<br/>
<br clear="all" />
</div>

<div id="subnav" ng-show="nav.isSet(4);" style="margin-left: 20px;">
<div class="subbuttondiv" ng-class="{ subbuttondiv_selected:nav.isSetSub(1) }"><a href="javascript:load_subcontent('lab');" ng-click="nav.setSubTab(1);">Laboratory</a></div><div class="subbuttondiv" ng-class="{ subbuttondiv_selected:nav.isSetSub(2) }"><a href="javascript:load_subcontent('pharm');" ng-click="nav.setSubTab(2);">Pharmacy</a></div><div class="subbuttondiv" ng-class="{ subbuttondiv_selected:nav.isSetSub(3) }"><a href="javascript:load_subcontent('hosp');" ng-click="nav.setSubTab(3);">Hospital</a></div><div class="subbuttondiv" ng-class="{ subbuttondiv_selected:nav.isSetSub(4) }"><a href="javascript:load_subcontent('exam');" ng-click="nav.setSubTab(4);">Exam<br/>Room</a></div><div class="subbuttondiv" ng-class="{ subbuttondiv_selected:nav.isSetSub(5) }"><a href="javascript:load_subcontent('surgeryroom');" ng-click="nav.setSubTab(5);">Surgery<br/>Room</a></div><div class="subbuttondiv" ng-class="{ subbuttondiv_selected:nav.isSetSub(6) }"><a href="javascript:load_subcontent('arenain');" ng-click="nav.setSubTab(6);">Indoor<br/>Arena</a></div><div class="subbuttondiv" ng-class="{ subbuttondiv_selected:nav.isSetSub(7) }"><a href="javascript:load_subcontent('arenaout');" ng-click="nav.setSubTab(7);">Outdoor<br/>Arena</a></div>  

<br/>
<br clear="all" />
</div>

<div id="content">

(original content ofmain page)
<br clear="all" />

</div>
</div>

<div id="bottom_area">
<div id="separatordiv">&nbsp;</div>     
<div id="footer">
<br/>
</div>  
</div>

</body>
</html>

你在这里看到的一切都有效。当我点击其中一个子项目(仅在我点击某些标签时出现)和HTML内容的SUB页面加载时,那里的Angular无法正常工作。

1 个答案:

答案 0 :(得分:0)

我终于发现,重新加载新代码后我需要重新编译页面,以使Angular看到它不仅仅是文本。

谢谢,一切都是为了你的建议。