标签: angularjs-bindings

Angular 1.5组件绑定:检查回调是否存在

我有一个简单的contactList组件,它有2个绑定:contactsonRemove.

  • contacts 只是一组要显示的联系人
  • onRemove 是一个回调函数
app
  .component('contactList', {
    template: 
      `<div ng-repeat="c in $ctrl.contacts">
         {{c.name}}
         <div ng-click="$ctrl.onRemove({contact: c})">Remove</div>
       </div>`,
    bindings: {
      contacts: '<',
      onRemove: '&'
    },
    controller: function() {}
  })
Run Code Online (Sandbox Code Playgroud)

我在我的应用程序中多次使用此组件.而onRemove回调可以表现不同,这取决于其中contactList组件习惯.例:

  • contactMainView(=组件)显示搜索栏以及使用该contactList组件生成的联系人列表.onRemove将从数据库中删除联系人.

  • groupMembersView使用contactList组件显示属于给定组的所有联系人.这里不应该删除联系人,但onRemove不会设置.


思路:

首先我想,我可以使用ng-if="$ctrl.onRemove"但不起作用,因为onRemove它永远不会undefinedcontactList组件中.console.log(this.onRemove)总是打印:function(locals) { return parentGet(scope, locals); }

当然我可以使用另一种showRemove: '@'绑定,但这对我来说看起来并不干净.


你有任何想法或更好的解决方案来完成任务吗?

angularjs angularjs-directive angularjs-bindings angularjs-components

12
推荐指数
1
解决办法
2949
查看次数

Angularjs:为什么有3个观察者有1个绑定?

请看下面给出的截图

在此输入图像描述

正如您在上面的屏幕截图中看到的,单个绑定有#3观察者.

任何人都可以详细说明为什么会如此?

PS:我正在使用AngularJS Batarang来检查性能.

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

app.controller('appCtrl', function ($scope, $timeout) {
    $scope.name = 'vikas bansal';
})
Run Code Online (Sandbox Code Playgroud)
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script src="app.js"></script>
</head>

<body>
    <div ng-app="app" ng-controller="appCtrl">
        {{name}}
    </div>
</body>

</html>
Run Code Online (Sandbox Code Playgroud)

javascript angularjs angularjs-watch angularjs-bindings

8
推荐指数
1
解决办法
425
查看次数

范围变量值的变化没有反映在我的字符串中

我有以下字符串:

"/root/get";
Run Code Online (Sandbox Code Playgroud)

现在我在上面的字符串中生成一个带有1个范围变量的查询字符串,但问题是当该变量的值发生变化时,新值不会自动更新到我的URL中.

您可以在下面的演示中看到我有2个按钮更新和检查.在更新中我生成查询字符串,并在检查按钮上我更新范围变量的值,但这没有反映在我的URL中.

我不明白为什么会这样.

单击检查按钮而不调用generateQueryParameters方法时的预期输出:

/root/get?no=2
Run Code Online (Sandbox Code Playgroud)

var app = angular.module("myApp", []);
        app.controller("myController", function ($scope) {
        
        $scope.no = 1;
        $scope.str = "/root/get";
     
        $scope.update = function (data) {
          $scope.str=generateQueryParameters($scope.str,
               "no",$scope.no);
               console.log($scope.str);
        };
           

            $scope.check = function () {
              $scope.no=2;
              console.log($scope.str);
            };
               
    function generateQueryParameters(url,name,value)
    {
        var re = new RegExp("([?&]" + name + "=)[^&]+", "");
        function add(sep) {
            url += sep + name + "=" + encodeURIComponent(value);
        }
        function change() {
            url = url.replace(re, "$1" + encodeURIComponent(value));
        }
        if (url.indexOf("?") === -1) { …
Run Code Online (Sandbox Code Playgroud)

javascript angularjs angularjs-scope angularjs-bindings

7
推荐指数
1
解决办法
493
查看次数