Question

JSBin示例： http://jsbin.com/yuyetakonowu/1/edit?html,js,output

摘要：我有两个指令（myParentDirective和myChildDirective）。 myParentDirective转换myChildDirective内容。我试图在myChildDirective中双向绑定模型对象。当我＆＃34;更新＆＃34;它成功运作通过简单地将属性更改或添加到现有对象实例来对象。但是，当我＆＃34;分配＆＃34;一个新对象（使用来自控制器的超时运算符的超时函数）myChildDirective将不会被更新。

HTML ：

<html ng-app='ValidationApp'>

<head>
    <title>Assigning a model object after isolated scope is set doesn't work</title>
</head>

<body ng-controller='MyController'>

    <h2>MyController.assignedObject: {{assignedObject}}</h2>
    <h2>MyController.updatedObject: {{updatedObject}}</h2>

    <my-parent-directive assigned-object='assignedObject' updated-object='updatedObject'>
        <my-child-directive></my-child-directive>
    </my-parent-directive>


    <script src='//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.js'></script>
    <script src='app.js'></script>
</body>

</html>

的JavaScript ：

var app = angular.module('ValidationApp', [])

app.controller('MyController', [
    '$scope',
    '$http',
    function($scope, $http) {
        // Model objects loaded on page-load
        $scope.assignedObject = {value: 'pre-update'}
        $scope.updatedObject = {value: 'pre-update'}

        // Mock ajax request
        setTimeout(function() {

            // This is what I'm ultimately trying to accomplish. However, myChildDirective is not properly
            // showing the updated value 'post-update'.
            $scope.assignedObject = {value: "post-update"}

            // I noticed that this line will properly update myChildDirective, but it's not an ideal solution.
            // I'm including it in the example just to show the inconsistent results in myChildDirective.
            $scope.updatedObject.value = "post-update"

            $scope.$apply()

        }, 1000)
    }
])

app.directive('myParentDirective', function() {
    return {
        restrict: 'E',
        transclude: true,
        scope: {
            assignedObject: '=',
            updatedObject: '='
        },
        template: '\
            <h2>myParentDirective.assignedObject: {{assignedObject}}</h2>\
            <h2>myParentDirective.updatedObject: {{updatedObject}}</h2>\
            <div ng-transclude></div>\
            ',
        controller: function($scope, $element) {
            this.assignedObject = $scope.assignedObject
            this.updatedObject = $scope.updatedObject
        }
    }
})

app.directive('myChildDirective', function() {
    return {
        restrict: 'E',
        require: '^myParentDirective',
        scope: false,
        template: '\
            <h2>myChildDirective.myParentDirective.assignedObject: {{myParentDirective.assignedObject}}</h2>\
            <h2>myChildDirective.myParentDirective.updatedObject: {{myParentDirective.updatedObject}}</h2>\
            ',
        link: function($scope, $element, $attrs, myParentDirective) {
            $scope.myParentDirective = myParentDirective
        }
    }
})

Answer 1

我找到了一些解决问题的方法......

问题在于我将$ scope.assignedObject分配给myParentDirective中的this.assignedObject。当我这样做时，myChildDirective无法知道属性何时发生变化。通常，将调用$ scope。$ apply（）函数来通知所有观察者范围属性已更改，但由于我重新将此对象引用分配给this.assignedObject，myChildDirective永远不会收到该事件。

最简单的解决方案可以在这里找到：http://jsbin.com/yuyetakonowu/11/edit。基本上，这只是继承父作用域，这样我就可以依靠有角度的作用域来发出相应的事件并相应地更新myChildDirective。

然而，这对我来说还不够好，因为我还需要myChildDirective来拥有一个具有自己属性的独立范围。这意味着我不能简单地继承＆＃34;父范围。我已通过以下方式解决了此问题：http://jsbin.com/yuyetakonowu/9/edit。

最终结果：

HTML：

<html ng-app='ValidationApp'>

<head>
    <title>Assigning a model object after isolated scope is set doesn't work</title>
</head>

<body ng-controller='MyController'>

    <h1>MyController</h1>
    <h2>assignedObject: {{assignedObject}}</h2>
    <h2>updatedObject: {{updatedObject}}</h2>

    <my-parent-directive assigned-object='assignedObject' updated-object='updatedObject'>
        <my-child-directive child-property='child-property-value'></my-child-directive>
    </my-parent-directive>


    <script src='//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.js'></script>
    <script src='app.js'></script>
</body>

</html>

JavaScript的：

var app = angular.module('ValidationApp', [])

app.controller('MyController', [
    '$scope',
    '$http',
    function($scope, $http) {
        // Model objects loaded on page-load
        $scope.assignedObject = {value: 'pre-update'}
        $scope.updatedObject = {value: 'pre-update'}

        // Mock ajax request
        setTimeout(function() {

            // This is what I'm ultimately trying to accomplish. However, myChildDirective is not properly
            // showing the updated value 'post-update'.
            $scope.assignedObject = {value: "post-update"}

            // I noticed that this line will properly update myChildDirective, but it's not an ideal solution.
            // I'm including it in the example just to show the inconsistent results in myChildDirective.
            $scope.updatedObject.value = "post-update"

            $scope.$apply()

        }, 1000)
    }
])

app.directive('myParentDirective', function() {
    return {
        restrict: 'E',
        transclude: true,
        scope: {
            assignedObject: '=',
            updatedObject: '='
        },
        template: '\
            <h1>myParentDirective</h1>\
            <h2>assignedObject: {{assignedObject}}</h2>\
            <h2>updatedObject: {{updatedObject}}</h2>\
            <div ng-transclude></div>\
            ',
        controller: function($scope, $element) {
            // Generally, exposing isolate scope is considered bad practice. However, this directive is intended
            // to be used with child directives which explicitly depend on this directive. In addition, child
            // directives will likely need their own isolated scope with two-way binding of properties on this scope.
            this._scope = $scope
        }
    }
})

app.directive('myChildDirective', function() {
    return {
        restrict: 'E',
        require: '^myParentDirective',
        scope: {
            childProperty: '@'
        },
        template: '\
            <h1>myChildDirective</h1>\
            <h2>childProperty: {{childProperty}}</h2>\
            <h2>assignedObject: {{assignedObject}}</h2>\
            <h2>updatedObject: {{updatedObject}}</h2>\
            ',
        link: function($scope, $element, $attrs, myParentDirective) {
            myParentDirective._scope.$watch('assignedObject', function(newValue, oldValue) {
                $scope.assignedObject = newValue
            })
            myParentDirective._scope.$watch('updatedObject', function(newValue, oldValue) {
                $scope.updatedObject = newValue
            })
        }
    }
})

AngularJS，在指令的隔离范围内分配和更新范围时的不一致性

1 个答案: