标签: angularjs-templates

我在控制器中有一个简单的对象,有时可能是空的({}).

app.controller('TestController', function() {
  var vm = this;

  vm.testObject = {};
});

我想在对象为空时隐藏或显示相应模板中的一些DOM元素.

我试图用一个简单的做到这一点<div ng-if="vm.testObject">,但是当vm.testObject === {}它被认为是true在ng-if.

<div ng-controller="TestController as vm">
  <div ng-if="vm.testObject">
    Test Object is not empty
  </div>
  <div ng-if="!vm.testObject">
    Test Object is empty
  </div>
</div>

有没有一种简单的方法来检查模板中的空对象？最好不要在范围内添加新变量.

这是一个有效的Plunker:http://plnkr.co/edit/Qed2MKmuedcktGGqUNi0？p = preview

我有一个来自服务器的简单字符串数组:

[{"things":["me", "my"]}]

在我的页面中,要显示我拥有的数组:

{{things}}

它打印:

["me", "my"]

如何控制打印,例如,如果我想删除括号和引号？

我有一个视图正在加载嵌入式文件后面text/ng-template没有找到ng-include.脚本块位于视图文件的最顶部:

<script type="text/ng-template" id="stringCondition">
    <!-- template guts -->
</script>

我将在以后的文件中加载:

<ng-include src="'stringCondition'"></ng-include>

但是在控制台中产生404错误:

GET http://localhost/~me/stringCondition 404 (Not Found)

我已经在命名上尝试了几种变体(比如最后有.html)并使用ng-include作为属性而不是高级元素.一切都没有运气.

什么可能导致嵌入式ng-template无法ng-include在同一个视图文件中注册？

更新:

正如评论和答案所指出的那样,我的代码的基本设计是正确的.但是某些事情导致ng-template(显然)无法使模板可用于系统.

我更新了我的代码以从HTML文件(而不是嵌入的模板)中提取,它工作正常.

是否有一种常见的情况,我可能会遇到这种休息ng-template？

我开始研究使用Angular2和我遇到的一个我无法找到解决方案的问题.我要求根据我从模型中收到的数据,我希望为给定的组件加载不同的模板.这主要与根据我收到的数据维护不同的布局有关.这可能吗？

谢谢

我有一个范围变量$scope.object = { prop: 12345 },我删除它的属性设置为undefined.

<button ng-show="object.prop" ng-click="object.prop = undefined"/>

是否有可能从模板中删除属性而控制器中没有附加功能而不是将其值设置为undefined？

我正在尝试让Angular加载模板:

var app = angular.module("myApp", ['templates'])

和我的HTML:

<div ng-app="myApp">
  <div ng-include="'blah.html'"></div>
</div>

但我得到的只是404 Failed to load resource因为,Rails告诉我,No route matches [GET] "/blah.html".我知道这是因为Rails中的资产管道.blah.html是在/app/assets/javascripts/templates/blah.html,我正在使用angular-rails-templates宝石试图解决问题.所以我application.js有:

//= require angular-rails-templates
//= require_tree ./templates

但我没有运气.

生成的html表明angular-rails-templates正在加载(它有一个脚本/assets/angular-rails-templates....js)但是rails无法找到blah.html

版本:
rails 4.2.1
angular-rails-templates 0.1.4
angularjs 1.3.15

我有一个rails应用程序,使用angularjs进行客户端开发.我尝试加载位于`app/assets/javascripts/templates /'的模板:

myApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/', {
        templateUrl: '/index.html',
        controller: 'MainController'
      }).
      otherwise({
        redirectTo: '/'
      });
  }]);

但我总是收到一个错误:"错误:[$ compile:tpload]无法加载模板:/index.html".

我试图将"templates"文件夹移出javascripts - app/assets/templates,并通过在config/application.rb中添加以下行将其添加到我的资产管道加载中: config.assets.paths << Rails.root.join("app","assets","templates")

在我使用模板的完整路径之前,我一直收到相同的错误消息:templateUrl: '/assets/index.html',.

1. 为什么第一种方法不够用？angular-rails-templates gem不应该在app/assets/javascripts/templates中查找模板？

2. 我为什么要在javascript中使用资源的完整路径？

我正在尝试在 AngularStrap 弹出窗口中加载模板文件，但是我在使用 $templateCache 时遇到问题。我似乎比其他问题退了一步，因此这看起来是双重的。

按照 API 文档，我<script type="text/ng-template" id="popoverTemplate.html"></script>在结束</body>标记之前添加了一个右侧。当我<div ng-include="'popoverTemplate.html'"></div>在我的页面上使用时，我什么也得不到。如果我尝试使用，console.log($templateCache.get("popoverTemplate.html"))我会得到“$templateCache 未定义”，这使我认为我错过了一个关键步骤。但是，我无法在文档或其他问题中找到如何做到这一点。

编辑：注入服务是缺失的环节。但是，当我注入服务时，控制器的其他功能不再起作用，但是如果您注入该函数的所有参数，工作代码将变为：

(function() {
    "use strict";
    angular.module("app").controller("managerController", ["$scope", "imageHierarchyRepository", "$templateCache", function ($scope, imageHierarchyRepository, $templateCache) {
        imageHierarchyRepository.query(function(data) {
            $scope.hierarchies = data;
        });

        var template = $templateCache.get("popoverTemplate.html");
        console.log(template);
    }]);
})();

在我看来,我有这条线:

<input placeholder="Search" type="text" ng-change="searchChange()" ng-model="mySearch" ng-model-options="{debounce: 1000}">

然后我的控制器里面有:

angular.module('app.controllers', [])

.controller('listViewCtrl', ['$scope', '$stateParams', '$http',
function ($scope, $stateParams, $http) {

    $http.get('http://www.domain.co.uk/api/search.php').
        then(function(response) {
            $scope.food = response.data;
        });

    $scope.searchChange = function() {
        console.log($scope.mySearch);   
    };         

}])

但这给了我"未定义".

如何在控制器中引用mySearch输入字段的值？

我正在尝试构建一个指令来处理重复的扬声器列表的渲染.这里的最终目标是让页面自动反映在模态中进行的更新.

我在这里看到的问题是该speakers对象似乎没有进入模板.

这是填充的功能speakers.它在模态的承诺中被称为. speakers是一个speaker对象的集合.数据按预期恢复.

$scope.updateSpeakersList = function () {
    factory.callGetService("GetSpeakers?eventId=" + $scope.event.eventId)
        .then(function (response) {
            var fullResult = angular.fromJson(response);
            var serviceResponse = JSON.parse(fullResult.data);

            $scope.speakers = serviceResponse.Content;

            if ($scope.speakers === null) {
                $scope.hasSpeakers = false;
            } else {
                $scope.hasSpeakers = ($scope.speakers.length > 0);
            }

            LogErrors(serviceResponse.Errors);
        },
        function (data) {
            console.log("Unknown error occurred calling GetSpeakers");
            console.log(data);
        });
}

// other code... then this

modalInstance.result.then(function (savedSpeaker) {
    console.log("BEGIN modalInstance.result");
    $scope.savedSpeaker = savedSpeaker;
    console.log("$scope.savedSpeaker = " + …

我试图将一些数据传递给angularjs表单但没有成功.我正在定义一个模块,在模板中调用它并将模板绑定到控制器.我们的想法是将一些内容传递给$ scope变量,以便将现有用户名显示为该字段的值.相同的表单将用于添加和编辑用户.在后一种情况下,我会通过获取ID的用户,并通过自己的信息到$scope通过myForm变量.

这里有一个让事情变得简单的人:http ://plnkr.co/edit/nAabxgrw4HqLcgrErVxq?p=preview

模板:

<div ng-app="App">
<form ng-controller="TestController" class="form-horizontal" name="myForm" novalidate>
  <div class="form-group" ng-class="{ 'has-error' : myForm.username.$invalid && !form.username.$pristine }">
                        <div class="col-md-6">
                            <label class="control-label no-padding-right" for="username">Nome</label>
                            <input 
                                name="username" 
                                id="username" 
                                ng-model="username" 
                                type="text" 
                                class="form-control" 
                                ng-required="true" />
                            <p ng-show="myForm.username.$invalid && !myForm.username.$pristine" 
                                        class="help-inline no-padding">This field is required</p>
                        </div>
                    </div>
 <p>{{ myForm.username }}</p>
</form>
</div>

码:

window.angular.module('App', []);
window.angular.module('App').controller('TestController', ['$scope', function ($scope) {
  $scope.myForm = {};
  $scope.myForm.username = 'John Doe';      
}]);

任何帮助都是极好的.

我是 angular2 的新手，并尝试将对象结果绑定到 html 模板。我可以使用 Observable 从 srtvice 获取数据。我也可以在控制台和模板中看到 JSON 数据。但是当我尝试从结果 json 访问属性时，它没有显示如下图所示的数据。

下面是我的该组件的代码，

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { JuniorService } from '../Service/service.junior';
import { Employee } from '../../models/Employee';


@Component({
  selector: 'my-getjunior',
  template: `<h1>Details of {{id}} 
  <hr/>
  JSON :  {{Junior | json}} 
  <hr/>
  Summary :  {{junior?.summary}}</h1>`
  //templateUrl: './app/Junior/get/junior.get.html'
})
export class JuniorGet implements OnInit
 {

errorMessage: string;
Junior: Employee;
id: number;
private sub: any;

  constructor (private juniorService: JuniorService, private route: …