Question

我需要的是在指令中注入数据，这取决于通过HTML元素属性值传递给此指令的值，动态更改强>

这是我的代码：

＆＃13;
＆＃13;
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 } });
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

这是一个演示插件：

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

正如在StackOverflow上的许多类似主题中所建议的那样，我已经尝试$scope.$watch，但我必须做错事。该值将一次插入到指令中，并且在属性值更改时不会更新。

我在观察者功能中改变了什么让它发挥作用？或者也许这种方法在我的情况下并不好，我应该尝试别的吗？

修改我必须使用＆＃34; controllerAs vm＆＃34;语法，因为此代码只是已经依赖它的更大应用程序的一部分。

Answer 1

您在控制器中的代码中唯一需要更改的内容：vm.scope = $scope;而不是vm.passedValue = $scope.passedValue;，并且在模板中将{{vm.passedValue}}更改为{{vm.scope.passedValue}}

Plunker：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>

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

1 个答案: