Question

这可能很简单，但我在SO和Angular文档中浏览了不同的问题，并且无法真正找到我正在寻找的内容。

在指令中：

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

使用控制器：

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

如果我想访问dataSource的值，我认为我可以做这样的事情：

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

MyController是：

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

但是当我尝试alert($scope.dataSource);值时，它是未定义的。

现在我知道我可以这样做：

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

并在指令和控制器中访问它，如下所示：

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

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

但是我希望能够传入一个JSON对象来做各种各样的事情，这看起来并不像标记那样干净，我希望它更直观地看一下html并知道dataSource是什么。

我真正想要的是理解我做错了什么，为什么这不起作用？我显然没有正确理解如何将各种事物传递到指令的孤立范围。

解决

所以，事实证明我使用了错误的属性名称。 HTML5将data-识别为有效属性，而Angular忽略了data-在变量上加前缀的事实，这意味着我需要以这种方式访问变量：

HTML：

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

JS：

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

干杯

Answer 1

您需要以

的形式访问指令范围变量

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

与在HTML标记中命名指令类似

Answer 2

所以，事实证明我使用了错误的属性名称。 HTML5将数据识别为有效属性，而Angular忽略了数据在变量上加前缀的事实，这意味着我需要以这种方式访问变量：

HTML：

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

JS：

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

更好的约定是不要使用带有＆＃34;数据的指令 - ＆＃34;在它的开头。

Answer 3

invite.directive('googlePlaces', function (){
  return {
    restrict:'E',
    replace:true,
    // transclude:true,
    scope: {location:'=location'},
    template: '<input id="google_places_ac" name="google_places_ac" type="text" class="input-block-level"/>',
    link: function(scope, elm, attrs){
      var autocomplete = new google.maps.places.Autocomplete($("#google_places_ac")[0], {});
      google.maps.event.addListener(autocomplete, 'place_changed', function() {
        var place = autocomplete.getPlace();
        scope.location = place.geometry.location.lat() + ',' + place.geometry.location.lng();
        console.log(scope.location);
        scope.$apply();
        // scope.$apply(function() {
          // scope.location = location;
        // });
      });
    }
  };
});

将范围变量从指令传递给它的控制器

3 个答案: