$在Angular 1.5组件中抛出$ .watch不是函数错误

问题描述：

我正在将directive移植到component结构，并且一切都很顺利 - 除非我有一个动态模板，我正在编译。除了当我尝试工作正常传递ctrl到$编译：

我改变：

$compile($element.contents())($scope);

这是工作 - 到：

$compile($element.contents())(ctrl);

而现在我得到这个错误：

child-component.component.js:76 TypeError: b.$watch is not a function 
    at Object.link (http://localhost:3000/lib/angular/angular.min.js:302:155) 
    at http://localhost:3000/lib/angular/angular.min.js:16:56 
    at ja (http://localhost:3000/lib/angular/angular.min.js:81:35) 
    at m (http://localhost:3000/lib/angular/angular.min.js:66:274) 
    at g (http://localhost:3000/lib/angular/angular.min.js:58:481) 
    at g (http://localhost:3000/lib/angular/angular.min.js:58:498) 
    at g (http://localhost:3000/lib/angular/angular.min.js:58:498) 
    at g (http://localhost:3000/lib/angular/angular.min.js:58:498) 
    at http://localhost:3000/lib/angular/angular.min.js:58:119 
    at http://localhost:3000/js/components/component-group/child-component.component.js:76:54

这里是一个有一些ctrl元素的例子，因为我怀疑issu e与绑定。

<div class="box" ng-class="{selected:ctrl.selected == 1}" ng-show="ctrl.selected">

这里是我的组件声明：

var childComponent = { 
    controllerAs: 'ctrl', 
    require: 'parentComponent', 
    bindings: { 
     attrone: '<', 
     attrtwo: '<' 
    }, 
    controller: childComponentController 
}; 

function childComponentController(SomeFactory, $rootScope, $compile, $timeout, $element, $scope) { 
etc...

我在做什么错的迁移？

请提供您的组件声明。或者至少是基本结构。将指令转换为组件时，有几件事需要修改。这将使诊断问题更容易。 – zilj

@zilj谢谢！我刚添加了我的声明。 – itamar

答

以下是我将如何整理组件以首先解决任何语法问题。

组分：

var childComponent = { 
    require: { 
    parent: '^parentComponent' 
    }, 
    bindings: { 
    attrOne: '<', 
    attrTwo: '<' 
    }, 
    controller: function() { 
    var vm = this; 

    vm.$onInit = function() { 
     console.log('Parent:', vm.parent); 
    } 
    } 
};

父分配给控制器对象语法
使用一个“^”来搜索在同一水平上或更高父控制器。
驼峰你的绑定属性
更新以使用本地$ctrl命名空间

查看：

<div class="box" ng-class="{ 'selected': $ctrl.selected === 1 }" ng-show="$ctrl.selected">

我也相信你的$编译应该没有改变。 $ compile应该使用$ scope。尝试将其设置回$compile($element.contents())($scope);

如果您能够使用codepen或类似软件进行复制，我很乐意为您提供有关此问题的报告。

$在Angular 1.5组件中抛出$ .watch不是函数错误

相关推荐