Angular ng-点击温泉

Question

我是编码的新手，我似乎无法弄清楚我遇到的一些问题。

<ons-row ng-click="myNavigator.pushPage('{{building.file}}.html')">

所以我开始了，{{ building.file }} 不会进入 url。有人可以帮助我或解释为什么它不起作用吗？这是我的完整代码

    <div ng-init="buildings = [
    {name:'name1',file:'file1', location:'location1', image:'images/img1.jpg', number:'(123) 400-0000'},

  {name:'name2',file:'file2', location:'location2', image:'images/img2.jpg', number:'(123) 400-0000'},

  {name:'name3',file:'file3', location:'location3', image:'images/img3.jpg', number:'(123) 400-0000'},
]">
  <!--There Are {{buildings.length}} restaurants-->
  <input type="search" ng-model="q" class="search-input" placeholder="Search..." />
  <br />
  <ons-list >
        <ons-list-item modifier="chevron" class="list-item-container" ng-repeat="building in buildings | filter:q as results">

          <ons-row ng-click="myNavigator.pushPage('/' + {{building.file}} + '.html')">
            <ons-col width="95px">
              <img src="{{building.image}}" class="thumbnail">
            </ons-col>
            <ons-col>
              <div class="name">
                {{building.name}}
              </div>
              <div class="location">
                <i class="fa fa-map-marker"></i> {{building.location}}
              </div>
              <div class="desc">
                {{building.number}}
              </div>
            </ons-col>
            <ons-col width="40px"></ons-col>
          </ons-row>
        </ons-list-item>
    </ons-list>
  <ul class="example-animate-container">
    <li class="animate-repeat" ng-if="results.length == 0">
      <strong>No results found...</strong>
    </li>
    <li class="animate-repeat" ng-if="results.length == 555">
      <strong>No results found...</strong>
    </li>
  </ul>

Answer 1

我没有你的确切代码，但我认为你不应该在函数调用中使用表达式。我为您的应用创建了示例演示 Demo。请通过单击名称在控制台上进行检查。它记录正确 url。希望这对您有所帮助！

 <div ng-click="pushPage('/' + building.file + '.html')">
      {{building.name}}
    </div>

Answer 2

我在您的代码中没有看到 ons-navigator。 angular 中最简单的方法是对 ons-navigator 使用 var 然后你可以使用 myNavigator.pushPage('name')

<ons-navigator var="myNavigator"> 
  <ons-page>
    <ons-row ng-click="myNavigator.pushPage('file.html')" > My Row </ons-row>
  </ons-page>
</ons-navigator>
<ons-template id="file.html">
  <ons-page>
    My Content
  </ons-page>
</ons-template>

Angular ng-点击温泉

Angular ng-click onsen

angularjs

onsen-ui

angularjs-ng-click