Angular.js - 將指令綁定到控制器中的變量

我想將指令綁定到控制器中的變量，但無法解決如何從Angular.js文檔中執行此操作（也不搜索網頁，查找在egghead視頻）。Angular.js - 將指令綁定到控制器中的變量

我有以下的html：

<body ng-app="MyApp"> 

    <div ng-controller="triCtrl"> 

     <div jqslider pleaseBindTo="firstValue"></div> 
     <br> 
     <br> 
     <br> 
     <br> 
     <div jqslider pleaseBindTo="secondValue"></div> 

     <p>{{firstValue.v}}</p> 
     <p>{{secondValue.v}}</p> 
    </div> 

</body>

而下面的JS：

function triCtrl($scope) { 
    $scope.firstValue = {"min":0, "max":100, "v":50}; 
    $scope.secondValue = {"min":0, "max":1000, "v":450}; 
} 


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

myAppModule.directive('jqslider', function() { 
    return { 
     link:function(scope, element, attrs) { 
      element.slider({ 
       range: false, 
       min: scope.min, 
       max: scope.max, 
       value: scope.v, 
       slide: function(event, ui) { 
        scope.v = ui.value; 
        scope.$apply(); 
       } 
      }); 
     } 
    }; 
});

我曾嘗試使用範圍幾個方面：{}與&，@，=等等，但我可以不能讓它工作。有任何想法嗎？我知道pleaseBindTo屬性必須被捕獲，但我不知道在哪裏或如何。

來源

2013-04-02 user1276273

一些觀察：
1.您的指令是屬性 2.您正在將值傳遞給屬性本身。

也許你應該改變你的指令到一個元素。重寫代碼如下：

<jqslider pleaseBindTo="firstValue"></jqslider>

卸下div的並直接使用該指令作爲一個元素。接下來，在你的指令的定義，寫：

myAppModule.directive('jqslider', function() { 
    return { 
     scope: { 
      pleaseBindTo: "=pleaseBindTo" 
     } 
     link:function(scope, element, attrs) { 
      element.slider({ 
       range: false, 
       min: scope.pleaseBindTo.min, 
       max: scope.pleaseBindTo.max, 
       value: scope.pleaseBindTo.v, 
       slide: function(event, ui) { 
        scope.pleaseBindTo.v = ui.value; 
        scope.$apply(); 
       } 
      }); 
     } 
    }; 
});

如果你想依舊保持指令作爲一個屬性，你可以嘗試訪問的pleaseBindTo的發言attrs.pleaseBindTo鏈接功能裏面的價值 - 我不確定這一點，需要檢查出來。

來源

2013-04-02 16:57:37 callmekatootie

這似乎不起作用，現在滑塊完全不出現。我是否需要爲此解決方案包含一個包含一些div的模板？ – user1276273

什麼不起作用 - 用作屬性或用作元素或兩者兼用？ – callmekatootie

Angular.js - 將指令綁定到控制器中的變量

回答

相關問題