Question

我正在尝试在定义指令时使用scope: {test:"="}表示法实现本地/父数据绑定。

但是，在下面的示例中，尽管console.log($scope.$parent);记录父作用域确实已定义了属性test，但此代码会抛出异常Expression 'undefined' used with directive 'testdirective' is non-assignable。

如果我使用scope: {test:"=?"}，则不再抛出异常，但在父级和指令$scope.test之间没有数据绑定。

TestCtrl是视图的控制器。

我做错了什么？

app.js

var ng_app = angular.module('my_app',['ngRoute']);

ng_app.config(['$routeProvider', function($routeProvider){
    $routeProvider.
    when('/testroute/', {templateUrl: 'partials/test.html', controller:'TestCtrl'}).
    otherwise({redirectTo: '/testroute/'});
}]);

ng_app.controller('TestCtrl', function($scope){$scope.test = 0;});

ng_app.directive('testdirective', function()
{
    return {
        restrict:'E',
        scope: {test:"="}, // this complains that the parent.scope has no property 'test'
        controller: function($scope){
            // this logs a scope with adequate 'test' property defined:
            console.log($scope.$parent);                 
            $scope.test = 1;
        }
    }
});

分音/的test.html

<testdirective></testdirective>

我使用angular 1.2.0rc3

Answer 1

是的，scope: {test:"="}没有定义您想要的父范围。它定义了连接到封闭范围的属性。

因此，您需要在声明中添加名为test的属性：

<testdirective test="test"></testdirective>

为了使其更加清晰，我们将属性重命名为myModel：

ng_app.directive('testdirective', function()
{
    return {
        restrict:'E',
        scope: {myModel:"="}, 
        link: function($scope){

            $scope.myModel = 1;
        }
    }
});

声明：

<testdirective myModel="test"></testdirective>

本地/父数据绑定不能使用指令隔离范围

1 个答案: