从指令传递范围的变量到它的控制器 [英] Pass scope variable from directive to it's controller

问题描述

这可能是容易的，但我在这里浏览的SO和角文档中的不同的问题，并不能真正找到我要找的。

在一个指令：

 函数ssKendoGrid（）{
    返回{
        范围： {
            数据源：=
        }，
        模板：＆LT; D​​IV剑道网K-选项='gridOptions'＆GT;＆LT; / DIV＆gt;中，
        控制器：ssKendoGridCtrl
    }
}
 

使用控制器：

 函数ssKendoGridCtrl（$范围）{
    警报（$ scope.dataSource）;
    //其他的东西
}
 

如果我要访问数据源我以为我能够做这样的事的值：

 ＆LT; D​​IV NG控制器=myController的＆GT;
    ＆LT; D​​IV SS-剑道网数据源=测试＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

myController的是：

 函数myController的（$范围）{
    $ scope.test =测试;
}
 

但是，当我尝试警报（$ scope.dataSource）之际，不确定; 值..

现在我知道我能做到这一点：

 ＆LT; D​​IV SS-剑道格=测试＆GT;＆LT; / DIV＆GT;
 

和访问它的指令和控制是这样的：

  {回报
    范围： {
        ssKendoGrid：=
    }，
    模板：＆LT; D​​IV剑道网K-选项='gridOptions'＆GT;＆LT; / DIV＆gt;中，
    控制器：ssKendoGridCtrl
}//在控制器
警报（$ scope.ssKendoGrid）;
 

但我想能在一个JSON对象做各种事情与传递，这似乎并不干净的标记，我想它是更直观的查看HTML并了解在数据源是

我真正想找的是我在做什么错误的理解了，为什么不这项工作？我显然没有得到如何将各种事物传递给指令的隔离范围正确的理解。

解决

所以，原来我用错了属性名称。 HTML5承认数据 - 角为有效的属性，而忽略了一个事实，即数据 - 是prefixed上可变的，这意味着我需要访问的变量是这样的：

HTML

 ＆LT; D​​IV SS-剑道网数据源=测试＆GT;＆LT; / DIV＆GT;
 

JS：

  {回报
    范围： {
        数据源：=源
    }，
    模板：＆LT; D​​IV剑道网K-选项='gridOptions'＆GT;＆LT; / DIV＆gt;中，
    控制器：ssKendoGridCtrl
}
 

干杯

解决方案

所以，原来我用错了属性名称。 HTML5识别数据 - 作为一个有效的属性和角度忽略了一个事实数据 - 是pfixed的变量$ P $，这意味着我需要访问的变量是这样的：

HTML

 ＆LT; D​​IV SS-剑道网数据源=测试＆GT;＆LT; / DIV＆GT;
 

JS：

  {回报
    范围： {
        数据源：=源
    }，
    模板：＆LT; D​​IV剑道网K-选项='gridOptions'＆GT;＆LT; / DIV＆gt;中，
    控制器：ssKendoGridCtrl
}
 

和更好的惯例是根本就没有在它开始使用的指令与数据 -

This is possibly easy, but I have browsed the different questions here on SO and in the Angular documentation and can't really find what I'm looking for.

In a directive:

function ssKendoGrid() {
    return {
        scope: {
            dataSource: "="
        },
        template: "<div kendo-grid k-options='gridOptions'></div>",
        controller: "ssKendoGridCtrl",
    }
}

That uses the controller:

function ssKendoGridCtrl($scope) {
    alert($scope.dataSource);
    //other stuff
}

If I want to access the value of dataSource I assumed I'd be able to do something like this:

<div ng-controller="myController">
    <div ss-kendo-grid data-source="test"></div>
</div>

MyController is:

function myController($scope) {
    $scope.test = "Tested";
}

But it comes as undefined when I try to alert($scope.dataSource); the value..

Now I know I can do this:

<div ss-kendo-grid="test"></div>

And access it in the directive and controller like this:

return {
    scope: {
        ssKendoGrid: "="
    },
    template: "<div kendo-grid k-options='gridOptions'></div>",
    controller: "ssKendoGridCtrl"
}

//In controller
alert($scope.ssKendoGrid);

But I would like to be able to pass in a JSON object to do various things with and this doesn't seem as clean as in the markup I'd like it to be more intuitive to look at the html and know what the dataSource is.

What I'm really looking for is an understanding of what I'm doing wrong, why doesn't this work?? I've obviously not got the right understanding of how to pass various things to the isolated scope of the directive.

SOLVED

So, turns out I was using the wrong attribute name. HTML5 recognizes data- as a valid attribute, and Angular ignores the fact that data- is prefixed on the variable, which means that I would need to access the variable this way:

HTML:

<div ss-kendo-grid data-source="test"></div>

JS:

return {
    scope: {
        dataSource: "=source"
    },
    template: "<div kendo-grid k-options='gridOptions'></div>",
    controller: "ssKendoGridCtrl"
}

Cheers

解决方案

So, turns out I was using the wrong attribute name. HTML5 recognizes data- as a valid attribute, and Angular ignores the fact that data- is prefixed on the variable, which means that I would need to access the variable this way:

HTML:

<div ss-kendo-grid data-source="test"></div>

JS:

return {
    scope: {
        dataSource: "=source"
    },
    template: "<div kendo-grid k-options='gridOptions'></div>",
    controller: "ssKendoGridCtrl"
}

And a better convention is to simply not use a directive with "data-" at the beginning of it.

这篇关于从指令传递范围的变量到它的控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！