javascript - 使用 controllerAs 语法在属性更改时更新指令范围

Question

我需要的是根据通过 HTML 元素属性值传递给该指令的值将数据注入(inject)指令内，该元素动态变化 .

这是我的代码:

angular.module('test', [])
    .controller('ctrl', function (dataService) {
        var vm1 = this;
        vm1.data = dataService;
        vm1.change = function () {
            vm1.data.testValue = !vm1.data.testValue;
        }
    })
    .directive('myDrct', function () {
        return{
            restrict: 'E',
            controller: 'drctCtrl',
            controllerAs: 'vm',
            scope:{
                passedValue: '@pass'
            },
            template: 'Actual value in directive: {{vm.passedValue}}'
        }
    })
    .controller('drctCtrl', function ($scope) {
        var vm = this;
        vm.passedValue = $scope.passedValue;
        $scope.$watch('watcher', function () {
            vm.passedValue = $scope.passedValue;
        })
    })
    .factory('dataService', function () {
        return{
            testValue: true
        }
    });

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<div ng-app="test" ng-controller="ctrl as vm">
    Value passed as a parameter to directive: {{vm.data.testValue}}
    <button ng-click="vm.change()">change</button>
    <div>
        <my-drct pass="{{vm.data.testValue}}"></my-drct>
    </div>
</div>

这是一个演示插件:

http://plnkr.co/edit/aAqKaD4G7QdwBYCLWAvM?p=preview

正如 StackOverflow 上许多类似主题中的建议，我已经尝试过 $scope.$watch ，但我一定做错了什么。该值只插入到指令中一次，并且在属性值更改时不会更新。

我应该在 watcher 函数中更改什么才能让它工作？或者也许这种方法对我来说一点都不好，我应该尝试其他方法？

编辑:我必须使用“controllerAs vm”语法，因为这段代码只是已经依赖于它的更大应用程序的一部分。

Answer 1

您唯一需要更改的是 Controller 中的代码:vm.scope = $scope; 而不是 vm.passedValue = $scope.passedValue; 并且在模板将 {{vm.passedValue}} 更改为 {{vm.scope.passedValue}}

笨蛋:http://plnkr.co/edit/q8JBFu4FD5ECPFHYlPg6?p=preview

angular.module('test', [])
    .controller('ctrl', function (dataService) {
        var vm1 = this;
        vm1.data = dataService;
        vm1.change = function () {
            vm1.data.testValue = !vm1.data.testValue;
        }
    })
    .directive('myDrct', function () {
        return{
            restrict: 'E',
            controller: 'drctCtrl',
            controllerAs: 'vm',
            scope:{
                passedValue: '@pass'
            },
            template: 'Actual value in directive: {{vm.scope.passedValue}}'
        }
    })
    .controller('drctCtrl', function ($scope) {
        var vm = this;
        vm.scope = $scope;

    })
    .factory('dataService', function () {
        return{
            testValue: true
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="ctrl as vm">
  Value passed as a parameter to directive: {{vm.data.testValue}}
  <button ng-click="vm.change()">change</button>

  <div>
    <my-drct pass="{{vm.data.testValue}}"></my-drct>
  </div>

</div>