相关疑难解决方法(0)

为了掌握AngularJS,我决定使用其中一个示例,具体来说,只需在Todo示例中添加一个"完整"屏幕,当用户输入5个todos时,它使用一个switch-case切换到另一个div .代码可以在http://jsfiddle.net/FWCHU/1/获得,如果有任何用途的话.

但是,似乎每个switch-case都有自己的范围($ scope.todoText不可用),但是在这种情况下可以使用addTodo()中的"this"来访问它.到目前为止一切都那么好,但是我想要在switch-case之外访问todoText(在switch-case里面),我该怎么做呢？我是否可以将switch-case范围绑定到模型,是否可以通过其他方式访问,还是应该以其他方式解决？

PS.我不是要找到上面代码的任何解决方案,我很确定我知道如何在不使用switch-case的情况下解决它,我想了解范围在这种情况下如何工作!

我有一个从外部源检索数据的工厂.一旦我获得数据,我就会使用第二个工厂按特定标准对其进行过滤.

工厂属性已分配给范围.

现在,当我在我的工厂中这样做时,它不会更新范围:

factory.foo = [{id:1,name:'foo'}]; // doesn't work

因此,第二工厂中的过滤器也不起作用

factory.foo = Filter.filter(); // doesn't work

虽然这有效:

factory.foo.push({id:1,name:'foo'}); // works

有没有人知道这是否有意以及为什么会这样,以及如何解决它？

全样品加上plunkr

app.factory('Foo',function(Filter) {
  var factory = {
    foo:[],
    getDataForFoo:function() {
      factory.foo = Filter.filter(); // doesn't work
      //factory.foo = [{id:1,name:'foo'},{id:1,name:'foo'}]; // doesn't work
      //factory.foo.push({id:1,name:'foo'}); // works
    }
  };
  return factory;
});

app.factory('Filter',function() {
  var factory = {
    filter:function() {
      var arr = [];
      arr.push({id:1,name:'foo'});
      return arr;
    }
  }
  return factory;
});

app.controller('MainCtrl', function($scope,Foo) {
  $scope.test = 'running';
  $scope.foo = Foo.foo; …

我有一个简单的AngularJS页面,其中包含我点击链接时显示和隐藏的不同部分.其中一个区域有一个可以过滤的重复列表.

包含列表的部分显示/隐藏时ng-show或ng-hide表现正常.当ng-if被使用时,列表不能被过滤.

演示

• 由于使用此版本不起作用ng-if
• 此版本由于使用而确实有效ng-show

示例HTML

<nav>
    <a href="javascript:{}" ng-click="area='one';">Area 1</a>
    <a href="javascript:{}" ng-click="area='two';">Area 2</a>
</nav>

<div ng-if="area==='one'">
    <h3>Area 1!</h3>
    <input type="text" placeholder="filter list..." ng-model="filterText" />
    <ul>
       <li ng-repeat="item in list | filter: listFilter">
           {{item.id}} - {{item.name}}
       </li>
    </ul>
</div>

<div ng-if="area==='two'">
    <h3>Area 2!</h3>
    <p>Stuff here...</p>
</div>

示例角度

$scope.area="one";
$scope.filterText="";

$scope.list = [
    {id:1, name:"banana"},
    {id:2, name:"apple"},
    {id:3, name:"orange"},
    {id:4, name:"pear"},
    {id:5, name:"apricot"}
];

$scope.listFilter = function(item){
    var term …

在AngularJS中,是否可以从包含的部分内部继承父控制器的作用域,而不是通过注入的服务传递数据？

示例案例:

让我们说ParentCtrl范围看起来像:{ testData: 'testing stuff' }

<div ng-controller="ParentCtrl">
    Here we're defined: {{testData}}
    <div ng-include="'partial.html'"></div>
</div>

内部partial.html:

<em>Inherited: {{testData}}</em>

因此,部分甚至不需要它自己的控制器.如果这是不可能的,你只能通过服务在控制器之间传递注入的数据,为什么Angular会这样做？

我有一个对象,我想在一个指令内观察.
该指令具有隔离范围,对象来自父控制器.

DOM:
<div hello-directive obj-to-track="{{myObj}}"></div>

指令JS:

scope:{
   objToTrack:'@'
},
link:function(scope,element,attrs){
   scope.$watch(function(newValue){
      //Inside here, newValue is a JSON string
      //So is scope.objToTrack
   });
}

无论如何,除了JSON.parse()
谢谢之外,还有来自父控制器的实际对象.

我在我的根模板中定义了ui-view <div ui-view=""></div>.如果该内容为空,是否可以自动隐藏该视图？

我正在寻找类似的线程一段时间,但所有人建议检查当前路线或将vars传递给rootScope,我不喜欢.我正在寻找最简单的解决方案 - 检查所需视图是否有任何内容定义,如果没有 - 隐藏它的div(或任何其他html标记)

我有一个泛型<item>指令,以及一个<listing>带有过滤器和分页工具的指令,用于列出<item>:

示例:https://plnkr.co/edit/r6byzhFX5m674ONhH1JS？p = preview

该<listing>模板是这样的:

<div ng-repeat="item in items">
  <item date="item">
        <ng-transclude ng-transclude-slot="itemContent"></ng-transclude>
  </item>
</div>

该<item>指令使用新的Angular 1.5多槽转换来轻松自定义页脚和标题:

<item data="itemData">
  <header>My header</header>
  <footer>My custom footer</footer>
</item>

当我尝试在使用时自定义项目时出现问题<listing>.如果我使用这样的东西:

<listing items="myItems">
  <item-content>
        <header>{{ item.name }}</header>
        <footer>My custom footer for {{ item.name }}</footer>
  </item-content>
</listing>

这是行不通的,因为<item-content>被插入<item>,但<header>并<footer>没有得到transcluded到他们适当的地方,他们无法读取item范围变量.有没有办法实现这个目标？

我正在尝试使用ng-switch和ng-include.问题在于ng-init和整个控制器块在任何包含更改时重新呈现.

在login_form.html中,当用户登录时,我在LoginCtrl中设置isLoggedIn = true.但是这会导致重新呈现下面的完整html,这会再次导致ng-init.

我该如何避免这种循环？

      <div ng-controller="LoginCtrl" ng-init="isLoggedIn = false" class="span4 pull-right">
        <div ng-switch on="isLoggedIn"> 
          <div ng-switch-when="false" ng-include src="'login_form.html'"></div>
          <div ng-switch-when="true" ng-include src="'profile_links.html'"></div>
        </div>
      </div>

以下是登录表单的HTML -

<form class="form-inline">
  <input type="text" placeholder="Email" ng-model="userEmail" class="input-small"/>
  <input type="password" placeholder="Password" ng-model="userPassword" class="input-small"/>
  <button type="submit" ng-click="login(userEmail, userPassword)" class="btn">Sign In</button>
</form>

以下是控制器 -

angularApp.controller('LoginCtrl', function($scope, currentUser){

  $scope.loginStatus = function(){
    return currentUser.isLoggedIn();
  };

/*  $scope.$on('login', function(event, args) {
    $scope.userName = args.name;
  }); 

  $scope.$on('logout', function(event, args) {
    $scope.isLoggedIn = false;
  });*/

  $scope.login = function(email, password){
    currentUser.login(email, password); …

在父控制器范围中,我已经定义了selectedItem哪个设置为'x'.然后在子范围中,我selectedItem使用ngModel 定义:

<div ng-app>
  <div ng-controller="CtrlA">
       <div ng-controller="CtrlB">
         <select ng-model="selectedItem" ng-options="item for item in items">
         </select>
      </div>
  </div>
</div>

function CtrlA($scope) {
    $scope.selectedItem = 'x';
    $scope.items = ['x', 'y'];
}

function CtrlB($scope) {}

加载页面时,selectedItem按预期正确设置为"x".当我选择'y'时,selectedItem在CtrlB $ scope中按预期给出'y'.

但是当我$scope.selectedItem在CtrlA范围内进行检查时(使用AngularJS的batarang),它会给出'x'.

jsFiddle:http://jsfiddle.net/sudhh/GGKjp/2/

预览页面:http://fiddle.jshell.net/sudhh/GGKjp/2/show/light/(用于检查angularjs batarang)

为什么$scope.selectedItem在CtrlA范围内没有得到更新,以"Y"？解释是什么？

我不想在父范围内使用事件或rootScope更新selectedItem(出于学习目的).

在一个html体中,我有两个模板,一个用于标题,另一个用于模板.头模板有一个save and download按钮,它应该使用ngTable导出将ngTable数据导出到csv文件,该导出位于contents.html模板文件中,但是这个导出仅在我使用单击处理程序放置一个锚标记以便导出时模板.

content.html(模板1)

<a class="btn btn-default export-btn" ng-click='csv.generate($event, "report.csv")' href=''>Export</a> <!-- this works -->
<table ng-table="tableParams" show-filter="true" class="table" export-csv="csv">
        <tr ng-repeat="item in $data" height="10px" class="animate" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}">
            <td data-title="'Date'" align="center" filter="{ 'date': 'text' }" sortable="'date'">{{ item.date | date: 'd MMM yyyy' }}</td>
            <td data-title="'Label'" align="center" filter="{ 'label': 'text' }" sortable="'label'">{{item.label}}</td>         
            <td data-title="'Count'" align="center" filter="{ 'count': 'text' }" sortable="'count'">{{item.count}}</td>
        </tr>
</table>

header.html(模板2)

<button class="save-button" ng-click='csv.generate($event, "report.csv")'></button> <!-- does not work-->

请帮助我使用单独模板上的按钮将表格内容导出到csv.

更新 …