Question

我想将一个指令绑定到控制器中的一个变量，但是无法从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();
                }
            });
        }
    };
 });

我尝试了几种使用范围的方法：{}和＆amp;，@，=等，但我无法让它工作。有任何想法吗？我理解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值 - 我不确定这一点，需要看看吧。

Angular.js - 将指令绑定到控制器中的变量

1 个答案: