Question

我有两个指令，我想在指令1中更新控制器语法中的模型（this）。

// Linkbox
SApp.directive('linkBox', ['$rootScope', '$compile', '$templateCache', '$state', '$timeout', function($rootScope, $compile, $templateCache, $state, $timeout){
    return {
        controller: function($scope, $element, $attrs, $transclude) {
            var vm = this;
            vm.setBoxTitle = function(title){
                vm.boxTitle = title;
                console.log('setBoxTitle', title); // returns correct value!
                // also tried this:
                // $timeout(function(){
                //  vm.boxTitle = title;
                //  console.log('title of box', vm.boxTitle);
                // }, 1);
            }
        },
        restrict: 'A',
        templateUrl: 'linkbox.html',
        controllerAs: 'lbCtrl',
        link: function($scope, iElm, iAttrs, controller) {
            console.log('link');
        }
    };
}]);

// SubCategories linkbox
SApp.directive('subCategories', ['$rootScope', '$compile', '$templateCache', '$state', function($rootScope, $compile, $templateCache, $state){
    return {
        require: 'linkBox',
        restrict: 'A',
        link: function($scope, iElm, iAttrs, lbCtrl) {
            lbCtrl.setBoxTitle('Title of box...');
        }
    };
}]);

使用指令：

<div link-box sub-categories ></div>

这是视图（ linkbox.html ）

<div class="linkbox">
  <h3 class="title" ng-bind="lbCtrl.boxTitle"></h3>
  <ul> <li> <a>...</a> </li> </ul>
</div>

指令的通信是正确的，console.log返回正确的值，但我看不到视图中的任何变化。你能帮忙吗？

更新

当我在linkBox指令的link函数中手动设置controller.boxTitle = 'A title'时，View已更新了值。所以html代码没有问题。

问题解决了。

还有link-box指令的另一种用法：

<div link-box sub-categories ></div>
<div class="area" link-box related-searchs ></div>

在第二次使用链接框时，我刚添加了另一个指令而没有设置标题。我应该使用隔离范围来防止不同模块的模型之间的切割。

Answer 1

根据jsbin中的代码，使用了ng-template，如果是这种情况，那么你已经为模板提供了id或类，如下面的id =“myTpl”，并使用ng-include directive < / p>

  <script type="text/ng-template" id="myTpl">
    <div class="box linkbox" >
      <div class="inr">
        <div class="content">
            <h3 class="title" ng-bind="lbCtrl.boxTitle"></h3>
            <ul>
                <li><a>link 1</a></li>
                <li><a>link 2</a></li>
            </ul>
        </div>
      </div>
    </div>    
</script>


<div link-box sub-categories  ng-include="'myTpl'"></div>

http://jsbin.com/baneyezezu/1/edit?html,js,output

如何从指令2更新指令1的模型并查看对视图的更改？

1 个答案: