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

Question

I want to bind a directive to a variable within a controller, but cannot work out how to do it from the Angular.js docs (nor searching the web, looking at the egghead videos). 我想将指令绑定到控制器中的变量，但无法从Angular.js文档中找到如何执行的指令（也不能在网上搜索，也不能看鸡蛋头的视频）。

I have the following html: 我有以下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>

And the following JS: 和下面的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();
                }
            });
        }
    };
 });

I have tried several ways using scope:{ } with &, @, = etc, but I can't get it to work. 我已经尝试了几种使用范围的方式：{}与＆，@，=等，但是无法正常工作。 Any ideas? 有任何想法吗？ I understand the pleaseBindTo attribute has to be captured somewhere, but I don't know where or how. 我知道pleaseBindTo属性必须在某个地方捕获，但是我不知道在哪里或如何。

Answer 1

Some Observations: 一些观察：
1. Your directive is an attribute 2. You are passing values to attributes themselves. 1.您的指令是一个属性2.您正在将值传递给属性本身。

Maybe you should change your directive to an element instead. 也许您应该将指令更改为元素。 Rewrite the code as follows: 重写代码，如下所示：

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

Remove the div 's and use the directive directly as an element. 删除div并将指令直接用作元素。 Next, in the definition of your directive, write the following: 接下来，在指令的定义中，编写以下内容：

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();
                }
            });
        }
    };
 });

If you wish to still keep the directive as an attribute, you could try to access the value of pleaseBindTo inside the link function with the statement attrs.pleaseBindTo - I am not sure of this, need to check it out. 如果您仍然希望将该指令保留为属性，则可以尝试使用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