相关疑难解决方法(0)

有没有办法使用多个对象订阅事件 $watch

例如

$scope.$watch('item1, item2', function () { });

我正在阅读一些文章,以了解更多angular.js的工作原理.

我不理解的一个术语是" 脏检查 ".

究竟是什么？它似乎是一个观察者模式,但显然它更好.

你能帮我理解一下吗？

提前致谢.

编辑:它也可以对谁想要了解更多有关观看的人有用的这段视频从swiip在NgEurope一些年前

TL:博士

如何使用ajax/json填充包含"select"过滤器的ng表？

Plunk显示问题:http://plnkr.co/Zn09LV

详情

我试图掌握AngualrJS和ng-table扩展,虽然我可以使用工作过滤器获得一些很好的表,当我使用javascript中定义的静态数据时 - 一旦我尝试将实际数据加载到桌子我遇到了障碍.

ng-table的主体正确填充,只要我只使用文本过滤器everthing似乎正在工作:

        <td data-title="'Name'" filter="{ 'Name': 'text' }" sortable="'Name'">
            {{user.Name}}
        </td>

工作得很好.

但是,如果我更新它以使用选择过滤器:

        <td data-title="'Name'" filter="{ 'Name': 'select' }" sortable="'Name'"  filter-data="Names($column)">
            {{user.Name}}
        </td>

我遇到了同步问题,因为在从服务器返回数据之前总是会评估Names变量.(可能在发送对服务器的请求之前评估Names varibale.)这意味着我得到了一个过滤器的空列表.

一旦数据从服务器返回 - 我似乎找不到更新选择过滤器的方法.重新运行创建过滤器列表的代码最初似乎没有效果 - 我不确定如何触发ng-table重新检查其过滤器,以便不读取更新的变量.在异步调用完成之前,我也无法找到推迟变量评估的方法.

对于我的javascript,我几乎使用了ng-table GitHub页面中的示例ajax代码,并在其上添加了select过滤器的示例代码.

    $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 10,          // count per page
        sorting: {
            name: 'asc'     // initial sorting
        }
    }, {
        total: 0,           // length of data
        getData: function($defer, params) {
            // ajax request to api
            Api.get(params.url(), …

我在angular指令中有这个代码,我发现$ watch行为有点令人困惑.updateSelect在"ng-click"中调用:

scope.updateSelect = function (type) {
    scope.selectionCtrl.activeList = scope.seedLists[type]; 
    scope.selectionCtrl.activeListKey = type; 
    scope.selectionCtrl.activeSelection = scope.selection[type];
    scope.selectionCtrl.staged = [];
    scope.selectionCtrl.stageRemove = [];
    if (type !== scope.activeTab) {
        scope.activeTab = type;
    }
    console.log("update");
};

scope.$watch('selectionCtrl.activeList', function(newValue, oldValue) {
    console.log("watch");
}, true);

当我点击按钮(触发updateSelect),并观察控制台时,我看到"更新"然后"观看".函数内部发生的第一件事selectionCtrl.activeList是设置,所以我希望看到"监视"然后"更新".

一旦阵列发生变化,不应该立即观察触发器吗？

我正在尝试使用AngularJS重写JS/jQuery SPA.SPA是使用惊人的Handsontable的项目编辑网格.我很高兴看到有一个AngularJS版本正在开发中,并且在大多数情况下,它的工作方式与预期一致.

但是,我很难搞清楚如何在AngularJS中的jQuery中做一些事情.网格具有(其中)3列,其中一列依赖于另外两列.三列是成本,售价和保证金(即(1 - (成本/价格))*100).我可以在控制器中进行数学运算并将边距传递到初始加载的$ scope.items变量中,但是当您更改成本或价格列时,它显然不会更新.它似乎是进行双向数据绑定的理想场所,但我无法弄清楚如何将margin的datacolumn值绑定到另外两行的值.我觉得有一种明显的方法可以做到这一点,但由于我是AngularJS的新手,我想我可能会把它扔给社区.

提前致谢!

编辑:

因此,在讨论了一些答案后,我想稍微改进一下我的问题,以了解问题的核心.我有一个REST API,用于提供JSON文档,其中包含来自在线销售点服务的项目数组.这是一个带有虚拟数据的示例:

{ '@attributes': {'count':10}, 'Item': [
  { 'customSku':'sampleItem1'
  , 'description':'Sample Item, first'
  , 'defaultCost':'10.00'
  , 'Prices': {'ItemPrice':[
      {'amount':'17.99', 'useType':'Default'}
    , {'amount':'19.99', 'useType':'MSRP'}
    ]}
  }
, { 'customSku':'sampleItem2'
  , 'description':'Item, Sample, 2nd'
  , 'defaultCost':'20.00'
  , 'Prices': {'ItemPrice':[
      {'amount':'29.99', 'useType':'Default'}
    , {'amount':'39.99', 'useType':'MSRP'}
    ]}
  }
]}

我不是在开玩笑说数据的结构是这样的,它完全是.无论如何.

现在,我在我的控制器像这样通过这个来的观点:$scope.items = JSON.parse(request.responseText);.如何将功能传递$scope.getMargin = function() { return (1 - (cost / price)) * 100 }给视图:成本和价格的范围是正确的项目？我觉得我真的很接近它,但我还没有到达那里.感谢回答者到目前为止!

编辑2:

根据要求,这里有 …

我有一个角度控制器:

.controller('DashCtrl', function($scope, Auth) {
    $scope.login = function() {
        Auth.login().then(function(result) {
            $scope.userInfo = result;
        });
    };
});

哪个使用我创建的服务:

.service('Auth', function($window) {
    var authContext = $window.Microsoft.ADAL.AuthenticationContext(...);

    this.login = function() {
        return authContext.acquireTokenAsync(...)
            .then(function(authResult) {
                return authResult.userInfo;
            });

    };
});

Auth服务使用的是Cordova插件,该插件位于角度世界之外.我想我不清楚何时需要使用a $scope.$apply来更新你的$ scope而你不需要.我的错误假设是因为我已将逻辑包装到角度服务中,然后在这个实例中我不需要它,但除非我将$scope.userInfo =语句包装在$timeout或中,否则什么都不会更新$scope.$apply.

为什么在这种情况下有必要？

我正在为我的网站创建打印页面：http ://vivule.ee/0/print

我想window.print()在页面加载后启动。我尝试过不同的方法，但没有成功。我知道这是可能的，因为我可以监听已完成的 Ajax 调用，但它在 Angular 中是如何完成的呢？

我的信息路径： HTML->Angular->php->mysql table->php->json->Angular->HTML

为什么这个小角度模块在ng-bind更改属性时无法更新视图？

<body ng-app="bindExample">

<script>
  angular.module('bindExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      var vm = this;
      vm.name = 'Whirled';
      window.setInterval(function(){ vm.name = 'Jon';}, 5000);
    }]);
</script>

<div ng-controller="ExampleController as vm">
    Hello <span ng-bind="vm.name"></span>!
</div>
</body>

我期待在5秒之后输出Hello Jon因它保持不变而改变Hello Whirled.为什么是这样？我还需要做其他事吗？

为什么我无法控制输出$ scope值？我正在尝试从页面中提取用户指定的值并在控制器中检索.最终我想将此传递给服务,以便多个控制器可以访问这些数据.

HTML

<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
    <head>
            <meta http-equiv="X-UA-Compatible" content="IE=Edge">
            <meta charset="UTF-8">
            <link rel="stylesheet" href="css/bootstrap.min.css" />    
            <!-- CDN lib files -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
            <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-animate.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.0/ui-bootstrap-tpls.min.js"></script>    

            <!-- custom angular script -->
            <script src="js/app.js"></script>  
    </head>
     <body>
        <div class="container">
            <div ng-controller="mainController">
                <h1>Hello world!</h1>
                <label> Please enter something</label>
                <input textarea ng-model="name"></input>
                <h4> This is what you entered : {{ name }} </h4>
                <h4 style=color:red> now filtering: {{ lower() }}</h4>
            </div>
        </div>
    </body>
</html>

APP.JS

var myApp …

这是我的工厂:

.factory('userService',()){
  var user = {};
  return {

  getFirstname : function () {
    return user.firstname;
  },

  setFirstname : function (firstname) {
    user.firstname = firstname;
  }

}

我在我的两个控制器MainCtrl和AccountEditCtrl中使用此服务我在我的MainCtrl中使用我的getFirstname()和在AccountEditCtrl中使用setFirstname

.controller('MainCtrl',['userService', function(userService){
  $scope.userName = userService.getFirstName();
}]);

.controller('AccountEditCtrl',['userService', function(userService){
      userService.setFirstname("New First Name");
}]);

我的问题是,当我使用userService.setFirstname()时,$ scope.userName不会在MainCtrl中更改.