标签: angularjs-ng-include

我有这个模块路线:

var mainModule = angular.module('lpConnect', []).
    config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
        when('/home', {template:'views/home.html', controller:HomeCtrl}).
        when('/admin', {template:'views/admin.html', controller:AdminCtrl}).
        otherwise({redirectTo:'/connect'});
}]);

主页HTML:

<div ng-include src="views.partial1"></div>

partial1 HTML:

<form ng-submit="addLine()">
    <input type="text" ng-model="lineText" size="30" placeholder="Type your message here">
</form>

HomeCtrl:

function HomeCtrl($scope, $location, $window, $http, Common) {
    ...
    $scope.views = {
        partial1:"views/partial1.html"
    };

    $scope.addLine = function () {
        $scope.chat.addLine($scope.lineText);
        $scope.lines.push({text:$scope.lineText});
        $scope.lineText = "";
    };
...
}

在addLine函数$scope.lineText中undefined,这可以通过添加ng-controller="HomeCtrl"来解决partial1.html,但是它会导致控制器被调用两次.我在这里错过了什么？

假设ngInclude可以采取原始路径是错误的吗？我一直试着设置ngInclude如下:

<div ng-include src="views/header.html"></div>

这不起作用,但如果我做这样的事情它确实有效.

// HeaderController
app.controller('HeaderCtrl', function($scope){
   $scope.templates = {[
     template: { url: 'views/header.html' }
   ]};

   $scope.template = $scope.templates[0].template;
});

在我的index.html中

<div ng-controller="HeaderCtrl">
  <div ng-include src="template.url"></div>
</div>

难道ngInclude仅仅只是关闭范围的值？如果是这样,为什么会这样,而不是直接包含html部分.

如何在angularJS中有条件地执行ng-include？

例如,我只想包含一些东西,如果变量x设置为true.

<div ng-include="/partial.html"></div>

我不太明白何时使用指令以及何时使用nginclude更合适.举个例子:我有一个部分,password-and-confirm-input-fields.html就是用于输入和确认密码的html.我在注册页面和更改密码页面下使用它.这两个页面各有一个控制器,部分html没有专用控制器.

我应该使用指令还是ngInclude为此？

我正在尝试使用ng-model将复选框绑定到范围.复选框的初始状态对应于范围模型就好了,但是当我选中/取消选中复选框时,模型不会更改.需要注意的一些事项是模板是在运行时使用ng-include动态加载的

app.controller "OrdersController", ($scope, $http, $location, $state, $stateParams, Order) ->

  $scope.billing_is_shipping = false
  $scope.bind_billing_to_shipping = ->
    console.log $scope.billing_is_shipping


<input type="checkbox" ng-model="billing_is_shipping"/>

当我选中该框时,控制台会记录错误,当我取消选中该框时,控制台会再次记录错误.我也在范围上有一个订单模型,如果我将复选框的模型更改为order.billing_is_shipping,它工作正常

我试图显示元素的二叉树,我用ng-include递归地进行.

ng-init="item = item.left"和之间有什么区别ng-repeat="item in item.left"？在这个例子中,它的行为完全相同,但我在项目中使用类似的代码,并且它的行为有所不同.我想这是因为Angular范围.也许我不应该使用ng-if,请解释我如何做得更好.

pane.html是:

<div ng-if="!isArray(item.left)">
    <div ng-repeat="item in [item.left]" ng-include="'Views/pane.html'">
    </div>
</div>
<div ng-if="isArray(item.left)">
    {{item.left[0]}}
</div>
<div ng-if="!isArray(item.right)">
    <div ng-repeat="item in [item.right]" ng-include="'Views/pane.html'">
    </div>
</div>
<div ng-if="isArray(item.right)">
    {{item.right[0]}}
</div>

<div ng-if="!isArray(item.left)">
    <div ng-init = "item = item.left" ng-include="'Views/pane.html'">
    </div>
</div>
<div ng-if="isArray(item.left)">
    {{item.left[0]}}
</div>
<div ng-if="!isArray(item.right)">
    <div ng-init="item = item.right" ng-include="'Views/pane.html'">
    </div>
</div>
<div ng-if="isArray(item.right)">
    {{item.right[0]}}
</div>

控制器是:

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

app.controller('MainCtrl', function ($scope) {

    $scope.tree = {
        left: {
            left: …

我有一个控制器,我写的,我在多个地方使用我的应用程序ng-include和ng-repeat,就像这样:

<div
  ng-repeat="item in items"
  ng-include="'item.html'"
  ng-controller="ItemController"
></div>

在控制器/模板中,我希望item价值存在,而整个事物都围绕着这个想法.但是,现在,我需要以稍微不同的方式使用控制器,没有ng-repeat,但仍然需要能够传入item.我看到ng-init并认为它可以做我需要的,像这样:

<div
  ng-init="item = leftItem"
  ng-include="'item.html'"
  ng-controller="ItemController"
></div>
<div
  ng-init="item = rightItem"
  ng-include="'item.html'"
  ng-controller="ItemController"
></div>

但这似乎并没有奏效.任何人都有任何想法如何在像这样的单一实例中传入变量的范围？

编辑:上面的控制器正在加载leftItem和rightItem值,如下所示:

.controller('MainController', function($scope, ItemModel) {
    ItemModel.loadItems()
        .then(function(items) {
            $scope.$apply(function() {
                $scope.leftItem = items.left;
                $scope.rightItem = items.right;
            });
        });
});

我有以下代码:

<div ng-repeat="module in modules" id="{{module.Id}}">
    <ng-include ng-init="bootstrapModule(module.Id)" src=""></ng-include>
</div>

我希望能够在src中构建一个字符串,如下所示:

/modules/{{module.Name}}/{{module.Name}}.tpl.html

但我一直在遇到障碍.我试过使用回调函数来构建它,

$scope.constructTemplateUrl = function(id) {
    return '/modules/' + id + '/' + id + '.tpl.html';
}

但这会被一遍又一遍地调用,而且似乎并不喜欢这样.我也试着像这样构建它:

ng-src="/modules/{{module.Id}}/{{module.Id}}.tpl.html"

但这也不起作用.我不知道是不是花了好几个小时在丛林中殴打,我想知道是否还有其他人遇到过这样的事情并有任何想法？

此外,当我从$ resource中获取模块时,我将它们与$ q异步返回,所以我似乎无法通过将其添加到模块中,然后再将其添加到控制器中,因为$scope.modules它等于此时的then函数.

有任何想法吗？

我想用变量更改ng-includes src.目前这就是我所拥有的.

 <div class='alignRightCenter' id='rightContent'>
    <ng-include src="'{{view}}'"> </ng-include>
</div>

这是控制器:

ctrl.controller('contentCtrl', ['$scope', function($scope) {
      $scope.view = "partials/setListName.tpl.html";
  }]);

不幸的是我不能使用ng-view,因为它已被用于访问此页面.有可能做出像这样的工作吗？

当我单击"检查"按钮时,以下代码抛出错误"TypeError:无法读取属性'$ pristine'的undefined".

app.controller('MainCtrl', function($scope) {
  // other stuff
})

.controller('Ctrl2', function($scope) {
  $scope.product = {description:'pump'};
  $scope.output = 'unknown';
  // uncomment to avoid undefined error, still can't see $pristine
  // $scope.formHolder = {};
  $scope.checkForm = function() {
    $scope.descriptionTest = $scope.product.description;
    if ($scope.formHolder.productForm.$pristine) {
      $scope.output = 'yes';
    }
    if ($scope.formHolder.productForm.$dirty) {
      $scope.output = 'no' 
    }
  }
});

HTML

  <body ng-controller="MainCtrl">
    <div >
      <ng-include ng-controller="Ctrl2" src="'myForm.html'"></ng-include>
    </div>
  </body>

myForm.html

<form name="productForm" novalidate>
  <h2>myForm</h2>
  description: <input type="text" name="description" ng-model="product.description"/>
  <br>
  <button ng-click="checkForm()">Check Form</button>
  <br> …