0

我想将指令绑定到控制器中的变量，但无法从 Angular.js 文档中确定如何执行此操作（也无法搜索网络，查看 Egghead 视频）。

我有以下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必须在某处捕获该属性，但我不知道在哪里或如何。

4

1 回答 1

0

一些观察：
1. 您的指令是一个属性 2. 您正在将值传递给属性本身。

也许您应该将指令更改为元素。重写代码如下： 

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

删除div's 并将指令直接用作元素。接下来，在指令的定义中，编写以下内容： 

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-02T16:57:37.413 回答