Question

我有一个名为main的控制器，它有两个嵌套的指令，称为formDirective和dataDirective。

我在formDirective视图中有以下表格。

<form name="menuForm">
    <h4>What is your name</h4>
    <input name="name" ng-value="" ng-model="name">
</form>

我正在尝试使用$ scope.watch在formDirective中更改表单值时更新dataDirective中的某些数据。

当我将以下代码放入formDirective控制器中时，它可以正常工作。

$scope.$watch('[menuForm.name.$viewValue]', function () {
  console.log('name changed');
  //update data directive here
}, true);

然而，这对我的解决方案不起作用，因为我需要在父控制器内部使用此代码，因为指令需要相互通信，这样做会导致封装问题。

当我将以下观察者放入我的主控制器时，它不起作用 - 我也期望它。（我可以从网络检查员那里浏览它。）

$scope.$watch('[$scope.menuForm.name.$viewValue]', function () {
      console.log('name changed');
      //update data directive here
    }, true);

有人能告诉我如何从主控制器上观看我的formDirectives变量吗？

Answer 1

当删除$ scope时，在MainCtrl中添加一个手表应该有效。

将$scope.$watch('[$scope.menuForm.name.$viewValue]'更改为$scope.$watch('[menuForm.name.$viewValue]'

另一种选择是将回调传递给你的指令。

示例小提琴：http://jsfiddle.net/rfkjLst3/13/

HTML

<div class="m" ng-controller="MainCtrl">
    <div>Main Ctrl</div>
    <h3>(Shared Scope)</h3>
    <directive1></directive1>
    <directive2></directive2>
    <hr />
    <h3>(Isolate Scope)</h3>
    <directive3 on-update="onUpdate(newVal, oldVal, $scope)"></directive3>
    <directive4 some-var="updateVar"></directive4>
</div>

主Ctrl

function MainCtrl($scope) {
    // Shared Scope
    $scope.name = '';
    $scope.latestValue = '';
    $scope.onChangeFn = watchFn; // Callback for shared scope directive

    // Watching from Main Ctrl
    $scope.$watch('[menuForm.name.$viewValue]', MainCtrlWatch, true);

    // Isolate Scope
    $scope.updateVar = '';
    $scope.onUpdate = function updateFn(newValue, oldValue) {
        $scope.updateVar = newValue || '';
        console.log('hi',newValue, oldValue, $scope);
    }
}

共享范围指令

app.directive('directive1', function ($window) {
    var directive = {
        link: link,
        restrict: 'EA',
        template: '<div class="d"><b>Directive 1</b>' +
            '<form name="menuForm">' +
            '<label for="name">What is your name: </label>' +
            '<input name="name" ng-value="" ng-model="name" required>' +
            '</form></div>'
    };
    return directive;

    function link(scope, element, attrs) {
        // Watch from inside Directive working using shared scope
        scope.$watch('[menuForm.name.$viewValue]', scope.onChangeFn, true);
    }
});

app.directive('directive2', function ($window) {
    //Notice no scope: { ... } so the scope is the parents.
    var directive = {
        link: link,
        restrict: 'EA',
        template: '<div class="d d2"><b>Directive2</b> <br /> {{ latestvalue }}</div>'
    };
    return directive;
    function link(scope, element, attrs) {}
});

隔离范围指令

app.directive('directive3', function ($window) {
    var directive = {
        link: link,
        restrict: 'EA',
        scope: {
            onUpdate: '&'
        },
        template: '<div class="d"><b>Directive 3</b>' +
            '<form name="menuForm">' +
            '<label for="name">What is your name: </label>' +
            '<input name="name" ng-value="" ng-model="name" required>' +
            '</form></div>'
    };
    return directive;

    function link(scope, element, attrs) {
        scope.name = '';

        // Watching from inside the directive and firing callback
        scope.$watch('[menuForm.name.$viewValue]', function (newVal,oldVal,$scope) {
            $scope.onUpdate({newVal: newVal, oldVal: oldVal});
        }, true);
    }
});

app.directive('directive4', function ($window) {
    var directive = {
        link: link,
        restrict: 'EA',
        scope: {
            someVar: '='
        },
        template: '<div class="d d2"><b>Directive4</b> <br /> {{ someVar }}</div>'
    };
    return directive;
    function link(scope, element, attrs) {}
});

Answer 2

有人能告诉我如何从主控制器上观看我的formDirectives变量吗？

您可以在本地范围属性和父范围属性之间创建具有隔离范围和set up bi-directional binding的指令。

示例：

var app = angular.module("app",[])

.controller("mainctrl", function($scope) {
   $scope.name = "";
})

.directive("myFormDirective", function() {
    return {      
      restrict: 'E',    
      scope: {
        model: '=myModel'
      },
      template: '<form name="menuForm"><h4>What is your name (Form Directive)</h4>' + 
        '<input name="name" ng-model="model"></form><p>',
      link: function(scope, element, attrs) {}
    };
})

.directive("myDataDirective", function() {
    return {      
      restrict: 'E',    
      scope: {
        model: '=myModel'
      },
      template: '<p>Data Directive: {{model}}</p>',
      link: function(scope, element, attrs) {}
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="mainctrl">
    <my-form-directive my-model="name"></my-form-directive>
    <my-data-directive my-model="name"></my-data-directive>
    <p ng-show="name">Controller $scope.name={{name}}</p>
</div>

如何从父控制器中查看指令变量？

2 个答案:

HTML

主Ctrl

共享范围指令

隔离范围指令