相关疑难解决方法(0)

如何访问ng-repeat生成的范围集？

我认为这个问题的核心是我不明白这种关系如何在a)传递给ng-repeat指令的对象集合和b)它生成的作用域集合之间起作用.我可以玩(a),ng-repeat范围观察和拾取,但我如何设置范围本身的变量(b)？

我的用例是我有一组使用ng-repeat重复的元素,每个元素都有一个使用ng-show/ng-hide切换的编辑视图; 每个元素的状态保存在本地范围的变量中.我希望能够在特定元素上触发ng-show,但是我希望从ng-repeat 外部调用触发器,因此我需要能够访问本地范围变量.

任何人都可以指出我正确的方向(或告诉我,如果我正在吠叫错误的树)？

谢谢

更新: 下面的链接非常有用,谢天谢地.最后,我为每个重复元素创建了一个指令,并使用该指令的link函数将其作用域添加到根作用域的集合中.

select从option元素传递对象时,我对元素上的ng-model有问题.所以,假设我们有一个表中的列数组columns(表的定义),我们想在这个定义上创建一些过滤器

var columns = [
  {name: 'Account ID',    type: 'numeric'},
  {name: 'Full name',     type: 'text'},
  {name: 'Date of birth', type: 'date'},
  {name: 'Active',        type: 'boolean'}
  // and so on
];

var filters = [{}];

HTML:

<div class="form-field" ng-repeat="filter in filters">
  <select ng-model="filter">
    <option value="" disabled>Choose filter</option>
    <option ng-repeat="column in columns" ng-value="column">{{column.name}}</option>
  </select>
  <input type="text" ng-model="filter.value">
</div>

正如你所看到的,我希望filter得到它的价值column并在其中添加特定数据,所以在某个时刻,我的过滤器可能是这样的:

[
  {name: 'Account ID', type: 'numeric', value: 123},
  {name: 'Active', type: 'boolean', value: 'Yes'} …

我在这里遗漏了一些明显的东西.在我的指令中,我有一个工作的双向数据绑定,但我似乎无法使用$ scope.$ watch()来监视指令的父作用域js对象上可能发生的更改.

http://jsfiddle.net/Kzwu7/6/

正如您所看到的,当我尝试在attrs.dirModel上使用$ watch时,结果值是未定义的,并且没有进一步观察,即使我在短暂延迟后修改对象.我也试过在$ watch语句中使用(而不是使用)true标志.

HTML:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>

<div ng-app="test" ng-controller="MainCtrl">
    <dir dir-model="model"></dir>
    <p>{{model.tbdTwoWayPropA}}</p>
</div>

<script type="text/ng-template" id="template">
    <div class="test-el">{{dirModel.tbdTwoWayPropB}}</div>
</script>

JS:

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

app.controller("MainCtrl", [
    "$scope", "$timeout",
    function($scope, $timeout){
        $scope.model = {
            tbdTwoWayPropA: undefined,
            tbdTwoWayPropB: undefined,
            tbdTwoWayPropC: undefined
        }

        // TBD Ajax call
        $timeout(function(){

            // alert("Model updated, but $scope.$watch isn't seeing it.");

            $scope.model.tbdTwoWayPropA = 1;
            $scope.model.tbdTwoWayPropB = 30;
            $scope.model.tbdTwoWayPropC = [{ a: 1 },{ a: 2 },{ a: 3 }];

        }, 2000) …

我正在编写一个AngularJS应用程序,其中一个数组(活动工单的列表)在许多不同的控制器中使用.使用$http对服务器的调用定期刷新此阵列.为了分享这些信息,我已将数组放入服务中.

服务中的数组开始为空(或者,出于调试目的,使用虚拟值["A", "B", "C"]),然后查询服务器以初始化列表.不幸的是,我的所有控制器似乎都被绑定到数组的预查询版本 - 在我的应用程序中,我看到的是我初始化数组的虚拟值.

我的目标是将数组绑定到我的控制器中,以便Angular能够意识到数组已经更新并导致我的视​​图在数组更改时重新呈现,而不必引入$watch或强制$http调用等待结果.

问题:如何将wo_list数组从我的服务绑定到我的控制器,以便Angular将其视为模型的常规可观察部分？

我有:

1. 包含数组和刷新函数的服务,用于从服务器初始化和定期更新数组(我知道这是通过console.log()消息工作).出于调试目的,我使用占位符"A","B"和"C"初始化数组 - 实际工作订单是五位数字符串.

   angular.module('activeplant', []).
      service('workOrderService', function($http) {
   
      wo_list = ["A", "B", "C"]; //Dummy data, but this is what's bound in the controllers.
   
      refreshList = function() {
            $http.get('work_orders').success(function(data) {
                wo_list = data;
                console.log(wo_list) // shows wo_list correctly populated.
            })
      }
   
      refreshList();
   
      return {
   
          wonums: wo_list,  // I want to return an observable array here.
   
          refresh:  function() {
            refreshList();
          }
   
      }
    }) …

   Run Code Online (Sandbox Code Playgroud)

我准备了一个小提琴并将其煮至最低限度:

http://jsfiddle.net/lpeterse/NdhjD/4/

<script type="text/javascript">
    angular.module('app', ['ui.bootstrap']);

    function Ctrl($scope) {
      $scope.foo = "42";
}
</script>


<div ng-app="app" ng-controller="Ctrl">
    1: {{foo}}<br />
    2: <input ng-model="foo" />
    <tabs>
        <pane heading="tab">
            3: {{foo}}<br />
            4: <input ng-model="foo" />
        </pane>
    </tabs>    
</div>

在开始时,所有视图都参考模型Ctrl.foo.

如果您在输入中更改某些内容,2:则会正确更新模型,并且此更改会传播到所有视图.

更改输入中的内容4:只会影响同一窗格中包含的视图.它的行为类似于以某种方式分叉的范围.之后的变化2:不再反映在标签中.

我阅读了有关指令,范围和转换​​的角度文档,但无法找到对此不良行为的解释.

我会很感激任何提示:-)

如果您需要更多信息或希望我澄清任何问题,请告诉我.我已经尝试了很多不同的东西来解决这个问题,但还没有找到解决方案.

我是angularJS的新手,我正在尝试构建一个包含多层数据的应用程序.我有一些基本的用户信息存储在控制器PageController的正文范围内.然后我有一个设置表单,使用$ routeParams(带控制器SettingsController)加载,其中包含一些用于模板目的的自定义指令.由于指令是嵌套的,我使用transclusion来加载第一个指令.这一切似乎都很正常.

我的问题是我试图user.firstname从最里面的指令中引用该字段,并希望使用双向数据绑定来允许对文本框所做的更改导致PageController范围内的值也发生变化.我知道很多这类问题是由在ng-model中使用原语引起的,但是我已经尝试将所有内容都放在一个额外的对象中,这样我才能触发原型继承无济于事.我在这做错了什么？

这是我的代码的JSFiddle,尽可能地剥离以隔离问题.在这个例子中,如果我输入外部文本框,它直接在PageController范围内,它将修改内部文本框,直到该文本框被修改,连接断开.这看起来就像其他问题中描述的使用原语的问题,但我无法弄清楚问题出在哪里.

HTML:

<body class="event-listing" ng-app="app" ng-controller="PageController">
    <div class="listing-event-wrap">
        <input type="text" ng-model="user.firstname" />
        <div ng-controller="SettingsController">
            <section block title="{{data.updateInfo.title}}" description="{{data.updateInfo.description}}">
                <div formrow label="{{data.updateInfo.labels.firstname}}" type="textInput" value="user.firstname"></div>
            </section>
        </div>
    </div>
</body>

角度指令:

app.directive('formrow', function() {
return {
    scope: {
            label: "@label",
            type: "@type",
            value: "=value" 
    },
    replace: true,
    template: '<div class="form-row">' + 
            '<div class="form-label" data-ng-show="label">{{label}}</div>' + 
            '<div class="form-entry" ng-switch on="type">' + 
                '<input type="text" ng-model="value" data-ng-switch-when="textInput" />' + 
            '</div>' + 
        '</div>'
}
});
app.directive('block', function() {
return …

我创建了一个带有单选按钮的AngularJS指令来控制我的页面将查询的环境并将其添加到我的页面.我正在使用双向绑定将名为变量的局部范围变量映射environment到具有相同名称的app变量.当我在模板中明确地创建单选按钮时,它似乎运行良好(在我实际使用的代码中,我templateUrl仍然使用相同的问题).

<div>
    <label><input type="radio" name="env" ng-model="environment" ng-change="changeEnvironment(1)" value="1" />Testing</label>
    <label><input type="radio" name="env" ng-model="environment" ng-change="changeEnvironment(2)" value="2" />Production</label>
</div>

我可以根据需要多次选择每个选项,并且值一直到应用程序的范围变量.

我想改变单选按钮的创建,以便ng-repeat在选择对象数组上使用.它创建选项,并捕获ngChange事件,但每次选择只能捕获一次.

<label ng-repeat="choice in choices">
    <input type="radio" name="env" ng-model="environment" ng-change="changeEnvironment(choice)" value="{{ choice.id }}" />{{ choice.name }}
</label>

这是工作版小提琴和我的指令代码的相关部分:

template: '<div>'
            + '<label><input type="radio" name="env" ng-model="environment" ng-change="changeEnvironment(1)" value="1" />Testing</label>'
            + '<label><input type="radio" name="env" ng-model="environment" ng-change="changeEnvironment(2)" value="2" />Production</label>'
            + '<div>Directive environment: {{ environment }}</div>'
            + '</div>',
link: function(scope, element, attributes) {

    scope.changeEnvironment = function(choiceID) { …

我的指令设置如下:

<div data-directive-a data-value="#33ff33" data-checked="true">
  <div data-directive-b></div>
</div>

• 我正在使用transclusion来确保directiveB渲染.
• directiveA 有一个复选框,用于在检查时更改某个值.
• 这个值需要在directiveA和directiveB范围内访问.

我设法做到了这一点,但只是通过引用$$prevSibling- 是否有更好的方法？

这是代码:http://jsfiddle.net/janeklb/yugQf/(在此示例中,单击复选框只是为了"清除"值)

-

更深入一点:(内容)directiveA(被转录到其中的内容)并非总是如此directiveB.其他类似directiveB的指令也会在那里结束.在directiveB"类型"总是会内使用directiveA.

使用ui-router的AngularJS应用程序.我的列表页面加载正确,但是当点击列表页面上的链接时,我的网址会更改但页面上的html不会更改,它会保留在列表页面上.这个路由有什么问题？

app.js

var myApp = angular.module('myApp', ['ui.router']);

myApp.config([
    '$stateProvider', function($stateProvider) {
        $stateProvider
            .state('products', {
                url: '',
                templateUrl: 'Scripts/templates/manageProducts/products.list.html',
                controller: 'productListCtrl'
            })
            .state('products.detail', {
                url: '/:id',
                templateUrl: 'Scripts/templates/manageProducts/products.detail.html',
                controller: 'productDetailCtrl'
            });
    }
]);

的index.html

<div ng-app="myApp">
    <div ui-view></div>
</div>

在products.list.html模板上:

<a ui-sref="products.detail({ id: 1 })">Detail for Item 1</a>

我应该使用UI路由器吗？列表和详细信息页面是2个不同的屏幕.

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

工厂属性已分配给范围.

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

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; …