Question

我有一个嵌套指令。我试图访问父指令的范围（它是孤立的），但似乎无法使它工作。尝试将其记录到控制台时，我收到了未定义的错误。

这是我想要开展工作的一个例子。

app.directive("myParentControl", function() {
    return {
        restrict: "A",
        scope: {},

        controller: function($scope) {
            $scope.propertyOne = "PropertyOne"
    },

    link: function(scope, element) {
        console.log(scope.propertyOne);
    }
  }
});

app.directive("myChildControl", function() {
    return {
        require: "^myParentControl",
        link: function(scope, element, attrs, myParentControlCtrl) {
            //Undefined
            console.log(myparentControlCtrl.propertyOne);
            //Not visible in scope inspector
            myParentControlCtrl.newValue = "New Value";
        }
    }
})

Answer 1

您要将变量设置为$scope：$scope.propertyOne = "PropertyOne"，但尝试从控制器访问它：console.log(myparentControlCtrl.propertyOne)。当然它是未定义的。

在控制器中设置属性：

controller: function($scope) {
    this.propertyOne = "PropertyOne";
},

如果您需要从myParentControl的模板访问它，请使用controllerAs属性将控制器放入范围：

app.directive("myParentControl", function() {
    return {
        ...
        controllerAs: "ctrl",
        ...
    };
});

从模板中访问它：

<span>{{ ctrl.propertyOne }</span>

Answer 2

您可以在子指令中使用scope直接访问父指令的范围。

myApp.directive("myChildControl", function() {
    return {
        require: "^myParentControl",
        link: function(scope, element, attrs, myParentControl) {
            console.log(scope.propertyOne);
            //Not visible in scope inspector
            myParentControl.newValue = "New Value";
        }
      }
    })

SEE DEMO HERE

访问父母＆＃34;隔离＆＃34;来自子指令的范围

2 个答案: