重新评估通过范围可变后指令的属性改变

我有一系列的ng-repeat内产生元件的：重新评估通过范围可变后指令的属性改变

<tr ng-repeat="index in elements"> 
    <td ng-click="doSomething(index)" my-tooltip tooltip="isInBasket(index.id) && 'REMOVE FROM BASKET' || 'ADD TO BASKET'" ></td> 
</tr>

该指令MyTooltip期待传递给tooltip属性的值。
这将首次运行，这意味着执行ng-repeat时。如果该元素已经在购物篮中，则工具提示将具有“从BASKET中移除”的值，否则将具有“添加到BASKET”的值。

的功能定义如下：

$scope.isInBasket = (id){ 
    return _.contains($scope.basket, id) 
}

现在，我的代码的其他部分将改变$scope.basket，所以我假定isInBasket将被重新评估每当$scope.basket改变并因此改变值传递给tooltip属性。

该指令

angular.module("tooltips", []) 
    .directive("myTooltip", ($parse, $rootScope, $state){ 
     return { 
     restrict: 'A', 
     priority: 999, 
     link: function(scope, elm, attrs) { 
      tooltip = scope.$eval(attrs.tooltip); 
      // .... 
     } 
     } 
    })

但是，这并不工作，我敢肯定，我做错了什么或者我失去了一些东西。

来源

2014-11-21 Leonardo

我做了编辑也包括指令 – Leonardo 2014-11-21 15:49:42

你创建一个孤立的范围？如果是的话，那么你需要在你的范围声明： { 提示：“&” }

我认为问题是，你绑定到一个布尔值，这不permuttable破裂的双重约束，但说实话，不知道你怎么做的提示指令

尝试用你的指令：

angular.module("tooltips", []) 
    .directive("myTooltip", ($parse, $rootScope, $state){ 
    return { 
     scope: { tooltip: "=" } //you could try also "&" 
     restrict: 'A', 
     priority: 999  
    } 
})

确定，和如果尝试分配等的值：

var tooltip = {dock: scope.$eval(attrs.tooltip)};

或 VAR工具提示= element.scope（）[attrs.tootip];

我的意思是我知道在绑定是非常重要的做它对一个对象。

如果你能与手表结合它那不帮助，应该这样做：

link: function(scope, elm, attrs) { 
    var tooltip = element.scope()[attrs.tootip]; 

    scope.$watch(function() { 
    return scope.attrs.tooltip; // i dont know what changes in your app 
    }, function() { 
    return tooltip(); 
    }, true);

来源

2014-11-21 15:38:34

我编辑问题以添加指令定义 – Leonardo 2014-11-21 15:50:06

我无法使用隔离范围。顺便说一下，使用这种方法不会评估'tooltip'参数传递的表达式 – Leonardo 2014-11-21 16:55:57

很抱歉，您的解决方案似乎无法为我工作。一劳永逸地理解如何管理传递给指令的参数并不容易.. – Leonardo 2014-11-24 09:38:38

使用tooltip="{{isInBasket(index.id) && 'REMOVE FROM BASKET' || 'ADD TO BASKET'}}"

请查看下面

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

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.name = 'World'; 
 

 
    $scope.elements = [{ 
 
    id: 0, 
 
    name: "banana" 
 
    }, { 
 
    id: 1, 
 
    name: "pear" 
 
    }, { 
 
    id: 2, 
 
    name: "apple" 
 
    }] 
 

 

 
    $scope.basket = []; 
 
    $scope.basket.push($scope.elements[0].id) 
 
    $scope.isInBasket = function(id) { 
 

 
    return _.contains($scope.basket, id) 
 

 
    } 
 

 
    $scope.doSomething = function(item) { 
 

 
    if (_.contains($scope.basket, item.id)) { 
 

 
     $scope.basket = _.without($scope.basket, item.id) 
 

 
    } else { 
 
     $scope.basket.push(item.id) 
 
    } 
 
    } 
 
});

tr { 
 
    border: 1px solid grey; 
 
}

<html ng-app="plunker"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <link data-require="[email protected]*" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /> 
 
    <script> 
 
    document.write('<base href="' + document.location + '" />'); 
 
    </script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script> 
 
    <script data-require="[email protected]*" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script> 
 
    <script data-require="[email protected]*" data-semver="2.4.1" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script> 
 
    <script src="app.js"></script> 
 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 
    <h1>Hello {{name}}!</h1> 
 
    Basket : {{basket | json }} 
 
    <div class="container"> 
 
    <table> 
 
     <tbody> 
 
     <tr ng-repeat="index in elements"> 
 
      <td ng-click="doSomething(index)" tooltip="{{isInBasket(index.id) && 'REMOVE FROM BASKET' || 'ADD TO BASKET'}}" style="padding-left:150px"> 
 
      {{index.id}} 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</body> 
 

 
</html>

来源

2014-11-21 15:47:44 sylwester

谢谢，做了一个编辑，'tooltip'是一个传递给指令的属性 – Leonardo 2014-11-21 15:58:06

重新评估通过范围可变后指令的属性改变

回答

相关问题