从isolated指令访问$ scope

时间:2015-01-04 10:24:57

标签: javascript angularjs angularjs-directive

我想从隔离指令中更改$ scope变量,这怎么可能?

我尝试过使用' @,=,&'指令范围内的语法但无法使其工作。

这是我的简化代码

JS

app.controller('testCtrl', function($scope) {
    $scope.hello = 'hello';
}

app.directive('testDirective', function() {
    return {
        restrict: 'E',
        template: '<div>{{text}}</div>',
        scope: {},
        link: function(scope, element) {
            scope.text = 'this is my text';
            scope.hello = 'hello world!';
        }
    };
});

HTML

<body>
    {{ hello }}
    <test-directive />
</body>

这是我想要的输出

hello world!
this is my text

3 个答案:

答案 0 :(得分:2)

您可以在指令上设置require选项并指定父控制器。这会将控制器作为最后一个参数传递给你的链接函数:

app.directive('testDirective', function() {
    return {
        restrict: 'E',
        template: '<div>{{text}}</div>',
        require: '^testCtrl',
        scope: {},
        link: function(scope, element, attrs, testCtrl) {
            scope.text = 'this is my text';
            testCtrl.setHello('hello world!');
        }
    };
});

请注意,您必须在控制器上创建此testCtrl.setHello()方法。这是因为你得到了控制器本身,而不是它注入的范围:

app.controller('testCtrl', function($scope) {
    $scope.hello = 'hello';
    this.setHello = function(newHello) {
      $scope.hello = newHello;
    }
}

此外,如果您并不真正关心严格执行控制器依赖性,您可以直接从您的指令访问scope.$parent.$parent.hello

答案 1 :(得分:0)

在HTML中,指令必须是蛇形的:

<test-directive />

在您的脚本中,必须以驼峰大小写定义指令:

app.directive('testDirective', function() {
});

另外,添加ngController指令:

<body ng-controller="testCtrl>
</body>

答案 2 :(得分:0)

这是缺少的东西:

  1. ng-controller未定义
  2. @表示将属性作为字符串传递,=表示将属性绑定到父作用域的属性(这是我们需要的)和&amp;表示从父作用域传入函数以便稍后调用。
  3. 当指令被称为“testDirective”时,它在HTML中查找如下:<test-directive></test-directive>因为JS中的camel情况需要 在HTML中用“ - ”分隔。
  4. <body ng-controller="testCtrl"> {{ hello }} <test-directive hello-from-parent="hello"></test-directive> </body>

    app.directive('testDirective', function() { return { restrict: 'E', scope: { hello: "=helloFromParent" }, template: '<div>{{text}}</div>', link: function(scope, element, attrs) { scope.text = 'this is my text'; scope.hello = 'hello world'; } } });

    我设置了一个有效的plnkr here