重新評估通過範圍可變後指令的屬性改變

我有一系列的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

重新評估通過範圍可變後指令的屬性改變

回答

相關問題