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

Question

我想將指令綁定到控制器中的變量，但無法從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屬性必須在某個地方捕獲，但是我不知道在哪里或如何。

Answer 1

一些觀察：
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鏈接函數中pleaseBindTo的值-我不確定，需要檢查一下。

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

問題描述

1 個解決方案

解決方案1
0 2013-04-02 16:57:37

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

問題描述

1 個解決方案

解決方案1 0 2013-04-02 16:57:37

解決方案1
0 2013-04-02 16:57:37