3

我有一个隔离范围的指令。我可以将父属性传递给它（下面的“ts”）。但是有没有办法在不使用属性的情况下将父范围数据传递给隔离范围？

换句话说，我想让我的指令定义访问父作用域的值（ts），而不是在用 html 编写的属性中发送它。（我读到使用 $parent 是不受欢迎的。）

原因：使用属性是可行的，但它看起来像一个杂物。我正在尝试编写一个组件，用户不必为我添加属性（在本例中为“ts='ts'”）来使我的组件工作。

小提琴：http: //jsfiddle.net/rrosen326/WWYuD/

<div  ng-app="testapp">
    <div ng-controller="Ctrl">
         <h1>Test of Directive</h1>

        <button ng-click="setData_ts()">Get Data</button>
        <chart-dir num='1' ts='ts'></chart-dir>
        <chart-dir num='2' ts='ts'></chart-dir>
    </div>
</div>

var app = angular.module('testapp', [])
    .controller('Ctrl', Ctrl);

function Ctrl($scope) {
    $scope.ts = -1; // timestamp 

    $scope.setData_ts = function () {
        $scope.ts = new Date().getTime();
    };

}

app.directive('chartDir', function () {
    return {
        restrict: 'EA',
        scope: {
            ts: '=',
            num: '@'
        },
        replace: true,
        template: '<div><h3>Chart {{num}}</h3><p>Time Stamp: {{ts}}</p></div>',
        link: function (scope, element, attrs) {

            scope.$watch('ts', function (newValue, oldValue) {
                // Data received - update charts
                console.log("DATA RECEIVED", newValue);
            });


        }
    };
});
4

2 回答 2

3

使用属性是可行的，但它看起来像一个杂物。我正在尝试编写一个组件，用户不必为我添加属性（在本例中为“ts='ts'”）来使我的组件工作。

这不是杂牌。属性使您的指令可与可能选择使用不同 $scope 属性名称的不同控制器重用：

<div ng-controller="Ctrl1">
   <chart-dir num='1' ts='ts1'></chart-dir>
</div>
<div ng-controller="Ctrl2">
   <chart-dir num='2' ts='ts2'></chart-dir>
</div>

换句话说，指令通常不应硬编码/假定 $scope 属性名称。

您的指令的用户应该必须添加属性来指定指令需要哪些数据来完成其工作。

于 2013-07-24T17:39:15.193 回答
2

您是否考虑过使用 $broadcast 事件在您的控制器之间进行通信（每个指令中的控制器是您的主 Ctrl() 控制器的子级）

我叉了你的小提琴，以便向你展示我会怎么做：http: //jsfiddle.net/DotDotDot/YQ2Tq/1/

在 HTML 方面，我修改了一些代码，删除了“ts”属性并修改了 ng-click 中的调用函数：

<button ng-click="broadcast_ts()">Get Data</button>
    <chart-dir num='1'></chart-dir>
    <chart-dir num='2'></chart-dir>

在 JS 方面，我定义了 broadcast_ts 函数，它广播一个事件（我称之为“hello”，但你可以定义任何名称）并发送数据（我没有发送任何有用的数据，但你可以发送你的新的'ts'值）：

$scope.broadcast_ts=function()
   {
       $scope.$broadcast('hello',{"values":'I was broadcasted'})   
   }

然后，在指令中，我定义了一个 $on 方法来捕获广播的事件：

scope.$on('hello', function(event, args){
                scope.ts=new Date().getTime();
                console.log("DATA RECEIVED", args.values);
            })

此方法重新计算新的 ts （您可以在小提琴中看到时间戳有微小的差异）但是您完全可以使用另一个值，或者在广播参数中传递的任何对象

于 2013-07-24T14:11:37.143 回答